Help with displaying two graphs in 1 row, 2 columns

Dash Python
14

Hi, I encounter a similar problem of not being able to obtain 2 columns, and I can’t spot the errors in my codes. The contents appear one on top of the other, instead of side-by-side. Will appreciate any help. Thanks.

My codes are:

import dash
import dash_core_components as dcc
import dash_html_components as html 
import dash_bootstrap_components as dbc 

body = dbc.Container(
    [dbc.Row(
        [dbc.Col(
            [
                html.H2("Heading"),
                html.P(
                    """\
                        This is supposed to be a paragraph of text. A large chunk of text."""
                ),
                dbc.Button("Show more", color="secondary"),],
                md=4,
        ),
        dbc.Col(
            [
                html.H2("Graph"),
                dcc.Graph(
                    figure={"data": [{"x": [1,2,3], "y": [1,4,9]}]}
                ),
            ]
        ),]
    )],
    className="mt-4"
)

def Homepage():
    layout = html.Div([
        body
    ])
    return layout 

app = dash.Dash(__name__, external_stylesheets = [dbc.themes.UNITED])
app.layout = Homepage()

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

I tried to simplify the body to the codes below but still couldn’t get 2 columns.

body = html.Div(
    [
    dbc.Row(dbc.Col(html.Div("A single column"))),
    dbc.Row(
        [
            dbc.Col(html.Div("Heading1")),
            dbc.Col(html.Div("Heading2")),
        ]
    ),
])