Control the component position

[YahavFes]

As you see in the picture the right Dropdown component is not aligned to the left one.
I want to locate it in the same line as the left Dropdown (to its right). I tried using ‘margin-bottom’ field in the style, but it has no effect.

Any suggestions?

[Blaceus]

You can find some previous answers on how to throw components around in these two links:

Text and Image side by side

You could ensure this by putting two sub-divs inside a “mother div”, where the two sub-divs are containing the text and image respectively. And then put a static height restraint on the sub-divs and giving them the ‘display’: ‘inline-block’ property aswell. I.e you’ll have something like this: html.Div( html.Div('here is some text', style={'display': 'inline-block', 'height': '200px'}), html.Div('here is an image', style={'display': 'inline-block', 'height': '200px'}) ) The produced re…

Horizontally stack components

You can kind of think of html Div objects like building blocks where each Div you put into an HTML page ‘climbs up from the bottom’, and as a default is flushed left. Thus it will place itself where it either hits the top of the page or another Div block. Let us look at your layout code. Basically you have something like app.layout = html.Div([ #big block html.Div( #small block upper most dcc stuff in here ), html.Div( #smaller block in middle dcc stuff in here ), h…

I suppose in your case you could do something like:

html.Div(
   html.Div([
      dcc.Dropdown(id='the-first-one'),
      dcc.Checkboxes('blah'),
      dcc.Checkboxes('blah'),
      dcc.Checkboxes('blah'),
   ]),
   html.Div(
      dcc.Dropdown(id='the-second-one'),
      style={'display': 'inline-block'}
   )
)