Two Dash controls side-by-side

Question

I am confused as to how to layout controls in dash. How do I put the dropdown and the datepicker on the same row side-by-side?

html.Div(
      [
        html.Div(
          [
            dcc.Dropdown(id='dropdown',
              options=[{'label': i, 'value': i} for i in all_options],
              multi=False,
               placeholder='Select Symbol...',
            ),
            dcc.DatePickerSingle(
              id='my-date-picker-single',
              min_date_allowed=today,
              max_date_allowed=today,
              initial_visible_month=today,
              date=today)
          ],
          className='row'
       ),
     ]
    ),

Answer 1

I think what you need is the style option of the elements you want to display side-by-side. Using style={'float': 'right','margin': 'auto'} on both of them.

html.Div(
      [
         html.Div(
          [
             dcc.Dropdown(id='dropdown',
                          options=[{'label': i, 'value': i} for i in all_options],
                          multi=False,
                          placeholder='Select Symbol...',
                          style={'float': 'right','margin': 'auto'}
             ),
             dcc.DatePickerSingle(id='my-date-picker-single',
                                  min_date_allowed=today,
                                  max_date_allowed=today,
                                  initial_visible_month=today,
                                  date=today
                                  style={'float': 'right','margin': 'auto'}
             )
          ],
      className='row'
   ),
 ]
),