I have build a sorting visualizer, everything is working fine, except for the minor bug that is very evident in this GIF:
The plots need to be side be side, and because of that the right ones are going out of the limit, I am failing to work out a way to make it all in alignment, and remove those white spaces in the other divs.
I am attaching the layout code for the first half of the app, i.e. the till the first two tiles, I guess that would be enough to figure out the flow.
It would be great to get some help so that I can finish off the little project 
fig_bubble = {
"data": [initial_trace],
"layout": go.Layout(
font=dict(color=colors["text"]),
paper_bgcolor=colors["background"],
plot_bgcolor=colors["background"],
height=400,
width=700,
hovermode="closest",
),
}
fig_selection = {
"data": [initial_trace],
"layout": go.Layout(
font=dict(color=colors["text"]),
paper_bgcolor=colors["background"],
plot_bgcolor=colors["background"],
height=400,
width=700,
hovermode="closest",
),
}
app.layout = html.Div(
id="intro",
style={"backgroundColor": colors["background"],"width": "100%"},
children=[
html.Div(
children="DASH SORTER",
style={
"textAlign": "center",
"color": colors["text"],
"fontSize": 50,
"fontWeight": 900,
"height": "70px",
"width": "104%"
},
),
html.Div(
id="first_row",
children=[
html.Div(
style={
"width": "100%",
"height": "100%",
"backgroundColor": colors["background"],
"display": "inline-block",
"text-align": "center",
},
children=[
html.Button(
"SLIDE TO CHOOSE THE SIZE OF ARRAY AND PRESS HERE WHEN YOU ARE SATISFIED WITH THE RANDOMNESS TO BEGIN SORTING!",
id="start",
n_clicks=0,
style={
"text-align": "center",
"fontSize": 15,
"backgroundColor": colors["background"],
"marginBottom": "1%",
"marginTop": "2%",
"height": "30px",
"color": "crimson",
},
),
],
),
],
),
html.Div(
dcc.Slider(
id="my-slider",
min=0,
max=100,
step=5,
value=20,
marks={ i : str(i) for i in range(0,101,5)
},
tooltip={"always_visible": True},
),
style={"height": "30px", "width": "100%", "display": "inline-block"},
),
html.Div(
id="first-two-sorts",
children=[
html.Div(
style={
"width": "50%",
"height": "50%",
"backgroundColor": colors["background"],
"display": "inline-block",
},
children=[html.Div(dcc.Graph(id="fig_bubble", figure=fig_bubble))],
),
html.Div(
style={
"width": "50%",
"height": "50%",
"backgroundColor": colors["background"],
"display": "inline-block",
},
children=[
html.Div(dcc.Graph(id="fig_selection", figure=fig_selection))
],
),
],
),
html.Div(
id="first-two-names",
children=[
html.Div(
style={
"width": "50%",
"height": "100%",
"display": "inline-block",
"fontSize": 15,
"height": "20px",
},
children=[
html.Div(
children="BUBBLE SORT",
style={
"textAlign": "center",
"color": colors["text"],
"fontSize": 29,
"fontWeight": 500,
},
)
],
),
html.Div(
style={
"width": "50%",
"height": "100%",
"display": "inline-block",
"fontSize": 15,
"height": "20px",
},
children=[
html.Div(
children="SELECTION SORT",
style={
"textAlign": "center",
"color": colors["text"],
"fontSize": 29,
"fontWeight": 500,
},
)
],
),
],
),
html.Div(
id="first-two-stats",
children=[
html.Div(
style={
"width": "50%",
"height": "100%",
"display": "inline-block",
"fontSize": 15,
"height": "30px",
"marginTop": "0.8%",
},
children=[
html.Div(
id="ops-b",
style={"textAlign": "center", "color": colors["text"],},
)
],
),
html.Div(
style={
"width": "50%",
"height": "100%",
"display": "inline-block",
"fontSize": 15,
"height": "30px",
"marginTop": "0.8%",
},
children=[
html.Div(
id="ops-s",
style={"textAlign": "center", "color": colors["text"],},
)
],
),
],
),