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(
            'staticPlot': True,
            'format': 'svg',
            'displayModeBar': False

Here is the enclosing div:

bar_charts = [
        [bar_charter('total', total_fig), bar_charter('pct', pct_fig)],

And here’s what the spacer class looks like:

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