Plotly Dash Can't Put div in the Same Row - html

Question

On a Plotly Dash dashboard, I am unable to get my graphs to stretch as the screen grows then be side by side in one row once the screen get's big enough. If I use style={"float:right"} and style={"float:left"} with each graph, it will work, but the graphs will not stretch with the screen anymore. I have attached a photo of the resulting plots. The plots are over/under. I want them side by side with a large browser window, then to shrink with a medium browser window and be over/under with a small browser window.
app = dash.Dash()
app.layout = html.Div([
dcc.Checklist(
id='input',
options=[
{'label': 'Astoria', 'value': 'AST'},
{'label': 'Warrenton', 'value': 'WAR'},
{'label': 'Seaside', 'value': 'SEA'}
],
values=['AST', 'WAR', 'SEA'],
),
html.Div(className='row',
children=[
html.Div(
dcc.Graph(id='value-index'),
className='col s12 m6',
),
html.Div(
dcc.Graph(id='rental-index'),
className='col s12 m6',
)
],
)
])
#app.callback(
Output('value-index', 'figure'),
[Input(component_id='input', component_property='values')]
)
def update_graph(input_data):
return {
'data': [
{'x': astoriaValueIndex.index, 'y': astoriaValueIndex.Value, 'type': 'line', 'name': 'Astoria'},
{'x': warrentonValueIndex.index, 'y': warrentonValueIndex.Value, 'type': 'line', 'name': 'Warrenton'},
{'x': seasideValueIndex.index, 'y': seasideValueIndex.Value, 'type': 'line', 'name': 'Seaside'},
],
'layout': {
'title': 'Zillow Value Index'
}
}
#app.callback(
Output('rental-index', 'figure'),
[Input(component_id='input', component_property='values')]
)
def update_graph(input_data):
return {
'data': [
{'x': astoriaRentalIndex.index, 'y': astoriaRentalIndex.Value, 'type': 'line', 'name': 'Astoria'},
{'x': warrentonRentalIndex.index, 'y': warrentonRentalIndex.Value, 'type': 'line', 'name': 'Warrenton'},
{'x': seasideRentalIndex.index, 'y': seasideRentalIndex.Value, 'type': 'line', 'name': 'Seaside'},
],
'layout': {
'title': 'Zillow Rental Index'
}
}
[enter image description here][1]
if __name__ == '__main__':
app.run_server(debug=True)

Answer 1

Did you try with CSS option : display : Flex; ?
html.Div(className='row',
style = {'display' : 'flex'},
children=[
html.Div(
dcc.Graph(id='value-index'),
className='col s12 m6',
),
html.Div(
dcc.Graph(id='rental-index'),
className='col s12 m6',
)
],
Normally, this should update the page according to the way you want.