Programmatically make plot areas have the same dimensions in Plotly Dash dashboard

Question

While the below two graphs are rendered in the same container div , it seems the axis labeling (amongst the other things???) is causing the actual render area to be smaller on the top plot

When the axis is modified this somewhat corrects:

Ultimately I'm wondering if its possible to make the plot areas be exactly the same width (regardless of axis titles/labels/etc)?

Here's the relevant code that goes with the above explanation:

    ...

html.Div([
    html.Div(
        id="row-1-2",
        children=[
            html.Div(
                [
                    dcc.Graph(
                        id='plot1',
                        style={"height": "20vh", "margin": "0px"},
                    ),
                ],
                className="twelve columns",
            )
        ],
        className="row",
        style={"margin": "0px"},
    ),
    html.Div(
        id="row-2-2",
        children=[
            html.Div(
                [
                    dcc.Graph(
                        id='plot2',
                        style={"height": "20vh", "margin": "0px"},
                    ),
                ],
                className="twelve columns",
            )
        ],
        className="row",
        style={"margin": "0px"},
    ),
], className="three columns"),

    ...

Answer 1

Try to use CSS property width to render same width graph sizes like -

html.Div([
    html.Div(
        id="row-1-2",
        children=[
            html.Div(
                [
                    dcc.Graph(
                        id='plot1',
                        style={"height": "20vh", "width":"80vw", margin": "0px"},
                    ),
                ],
                className="twelve columns",
            )
        ],
        className="row",
        style={"margin": "0px"},
    ),
    html.Div(
        id="row-2-2",
        children=[
            html.Div(
                [
                    dcc.Graph(
                        id='plot2',
                        style={"height": "20vh", "width":"80vw", "margin": "0px"},
                    ),
                ],
                className="twelve columns",
            )
        ],
        className="row",
        style={"margin": "0px"},
    ),
], className="three columns"),

    ...

Answer 2

seems like the closest I can get it is by setting automargin to false in the actual figure:

fig.update_layout({"xaxis": {"automargin": False}})