I am trying to align a dbc.Card with a html.Small element, but can’t manage. The small is a “message sent at” element underneath a textbox. I have tried to put the elements in a single dbc.Col, as well as multiple columns but no luck!

Here is a MWE of my problem and an image of the output.

import dash
import dash_bootstrap_components as dbc
from dash import html


def render_textbox(text: str):
    
    style = {
        "max-width": "70%",
        "width": "max-content",
        "padding": "5px 10px",
        "border-radius": 30,
        "margin-bottom": 30,
        "border": "1px solid",
        "margin-left": "auto",
        "margin-right": 0
    }

    textbox = dbc.CardBody(
        [
            dbc.Col(
                [
                    dbc.Card(text, style=style, body=True, color="primary", inverse=True),
                    html.Small(
                        "Last updated 3 mins ago",
                        className="card-text text-muted",
                    ),
                ],
            )
        ]
    )

    return html.Div([textbox])


app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    render_textbox("Hello there!"),
    className="p-5",
)

if __name__ == "__main__":
    app.run_server()

I need to align the “Last updated 3 mins ago” underneath the message on the right.