Dash layout issue when using Rows and Colums in Bootstrap Components

Question

I am trying to create a simple dashboard layout and just cannot get it to work. It involves having two rows of different heights in one column on the left and then one big column on the right. So I have managed to do it but I cannot get column 1, to be flush against 2 and 3, I have tried everything but I am new to this.

Here is the code:

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.title = " Dashboard"
app.layout = dbc.Container(
    [
    dbc.Row([    
    dbc.Col(html.Div([
        dbc.Row([dbc.Col(html.Div(html.B('2')),style={'height': '80px',"border":"1px black solid"},width=3)]),
    dbc.Row([dbc.Col(html.Div(html.B('3')),style={'height': '900px',"border":"1px black solid"},width=3)]),
        ])),
    dbc.Col(html.Div(html.B('1'), style={'height': '100%',"border":"1px black solid"})),
            ])
    ], fluid = True)

Answer 1

It seems the key is to use html.div, here is the solution.

from dash import Dash, html

import dash_bootstrap_components as dbc

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

app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.Div("2", style={"height": 80}, className="border"),
                        html.Div("3", style={"height": 900}, className="border"),
                    ],
                    width=3,
                ),
                dbc.Col(html.Div("1", className="vh-100 border")),
            ],
            className="g-0",
        )
    ],
    fluid=True, )

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