2 plots side by side in a 3 column CSS grid

I am working with a CSS grid that is 3 columns wide because that’s how the rest of the page is set up. However, I want to display two Dash plots side by side in one of the rows.

Every way I try to do this currently stacks the two plots on top of each other. It seems like everything I try to with html.Div around the go.Bar tags gets overridden with the Plotly positioning.

I tried adding float: left to the div style, but it didn’t work. I guess I could redo the entire page to be 6 columns, but there has to be a better way!

Here is the function I am using to create both bar charts:

def bar_charter(id_, fig):
    return Graph(
        id=id_, 
        figure=fig, 
        config={
            'staticPlot': True,
            'format': 'svg',
            'displayModeBar': False
            }
        )

Here is the enclosing div:

bar_charts = [
    html.Div(
        [bar_charter('total', total_fig), bar_charter('pct', pct_fig)],
        className="spacer"
    )
    ]

And here’s what the spacer class looks like:

.spacer {
  grid-column: 1 / -1;
  margin-bottom: 5vh;
  float: left;
}

Thanks!