Aligning 2 html.Divs of text next to each other in Plotly Dash

Dash Python
1

I am trying to place 2 Div elements side by side, without luck. I have been following Horizontally stack components and Dash for Beginners! [dash-plotly-python] | by Shraddha Shekhar | Analytics Vidhya | Medium guides on using width<50% and ‘display’: ‘inline-block’ but without luck.

If you look at attached pictures, it looks like the block that is supposed to go to the right, actually does, until i update the page by choosing a song in the list to show the lyrics on the left, then it pushes the recommendations to the bottom. Someone on stackoverflow suggested i change “inline-block” to flex in the parent div, but this forces recommendations block to be to the left, which is almost opposite of what i want.
Any ideas?

My code looks like this:

html.Div([
            html.Div(id="lyrics",style={'width': '50%', 'display': 'inline-block'}),
            html.Div([
            html.H6(id="recommendations",children="Recommendations:"),
            html.H3(id="songsbysameartist",children='Songs by the same artist:',
                    ),
            html.H6(id="sameartistrecommendations",
                    ),
            html.H3(id="songsfromotherartists",children='Music from other artists that you might also like:',
                   ),
            html.H6(id="otherartistrecommendations",
                )
            ],
            style = {'width': '30%', 'display': 'inline-block'})
            ])

recommen 1
recommen 11928×914 35.1 KB

recommen 2
recommen 21903×958 50.6 KB

2

Hi,

I would try to go with {'display': 'flex', 'justify-content': 'space-between'} in the parent div and set only the widths in each children. You can find more about justify-content on this very nice and visual guide.If you want two columns with equal size, it is probably better to just use 50% in both.

The issue with “inline-block” is that it is meant mainly to align text, so what is happening is that it is literally aligning the last line in your first div to the first line of your last div.

Hope it helps!