How can I set two dcc components inline?

I’ve following dash tutorial, Basic Callbacks | Dash for Python Documentation | Plotly.

And at ‘Dash App With Multiple Inputs’, the image of the results of example code and the ones of Theming with ‘Dash Enterprise Design Kit’ examples are different, dropdown components and radio item components are inline in the former, and not in the latter.

I can choose whether set line breaking between two Divs by using style = {’‘display’:‘inline-block’} argument in html.Div(), however I don’t know how to do that in above example.

I tried to put the argument style = {’‘display’:‘inline-block’} in dcc.Dropdown(), but results is… very wierd,

How can I make the same results with ‘Dash Enterprise Design Kit’ example, inline components?

I am not sure about the Design kit, but in principle you can do it by adding both div to a parent div, make the parent div with display=flex and each children with the components with width=50%. This should put each component side-by-side and each will take half of the parent width. I believe dcc.Dropdown has already a width equals to its parent block.

Hope this helps!