Help with CSS side-by-side layout

Dash Python
1

I have been learning how to use Dash, and I think I pretty well understand the dash/python side of things and have a functional dashboard. However, now I would like to get into styling with CSS. I have found guides and documents and have just been editing the ChriddyP style sheet, but I still can’t seem to get the side by side function of different elements to work.

For example if I have this html portion:

    html.Div(className = 'two columns', children = [               
            html.H6('Label for dropdown'),
                 dcc.Dropdown(id='this-is-my-dropdown', multi = False, value = 'A',
                      options = [{'label': 'A', 'value': 'A'},{'label':'B', 'value':'B'}],
                      className = 'dropdown')
    ])

And this is the relevant portion of the css file I am referencing:

.dropdown {
position: relative !important;
display: inline-block !important;
}

Should the inline-block not force the dropdown to appear next to the H6 text? I tried putting the inline-block argument on the H6 css as well, and also tried removing the H6 and dropdown from the larger Div. Any help would be appreciated!

Thank you

2

I resolved this issue: I added a

style = {‘display’:‘inline-block’}

to both the html.H6 and dcc.Dropdown elements if anyone else has this issue