title: Align the dash app layout input box with drop down and dates
body: <p>I am trying to create a layout using the DASH app, and I am not sure why it's not working when I am trying to set the input boxes with a drop-down.</p>
  
  <p>here is my layout:</p>
  
  <pre><code>tab_1_layout = html.Div([
  dcc.Input(id="ad_account_id", type="text", placeholder="Account ID", style={'width': '200px',
                                                                              'margin-top': 10,
                                                                              'margin-left': 20,
  
                                                                              }),
  # html.Br(),
  dcc.Input(id="app_id", type="text", placeholder="App ID", style={'width': '200px',
                                                                   'margin-left': 20,
                                                                   'display': 'inline-block'
                                                                   }),
  # html.Br(),
  dcc.Input(id="access_token", type="text", placeholder="Access Token", style={'width': '200px',
                                                                               'margin-left': 20,
                                                                               'display': 'inline-block'
                                                                               }),
  # html.Br(),
  dcc.Input(id="app_secret", type="text", placeholder="App Secret", style={'width': '200px',
                                                                           'margin-left': 20,
                                                                           }),
  
  # html.Br(),
  dcc.Dropdown(
      id='dimensions',
      options=[{'label': i, 'value': i} for i in ['Campaign', 'Placement', 'Creative']],
      multi=True,
      placeholder='Dimensions',
      style={'width': '200px', 'margin-left': 150, 'margin-top': 20, 'display':'inline-block'}
  ),
  # html.Br(),
  dcc.Dropdown(
      id='metrics',
      options=[{'label': i, 'value': i} for i in ['Impressions', 'Clicks', 'Conversions']],
      multi=True,
      placeholder='Metrics',
      style={'width': '200px', 'margin-left': 400}
  ),
  html.Br(),
  dcc.DatePickerSingle(
      id='start-date',
      placeholder="Start Date",
      min_date_allowed=datetime.datetime.now().strftime('2018-01-01'),
      max_date_allowed=datetime.datetime.today().date(),
      display_format='YYYY-MM-DD',
      style={'width': '200px', 'margin-top': 10, 'margin-left': 400}
  ),
  # html.Br(),
  dcc.DatePickerSingle(
      id='end-date',
      placeholder="End Date",
      min_date_allowed=datetime.datetime.now().strftime('2018-01-01'),
      max_date_allowed=datetime.datetime.today().date(),
      display_format='YYYY-MM-DD',
      style={'width': '200px', 'margin-top': 10, 'margin-left': 220}
  ),
  html.Br(),
  html.Button(id='submit-button', type='submit', children='Submit', style={'width': '200px', 'margin-top': 10,
                                                                           'margin-left': 10}),
  html.Div(id='output_div')]),
  </code></pre>
  
  <p>its shwoing the UI like below but i want to align dimension and metrics with first row and then on second row align start date and end date and third row will be submit.
  <a href="https://i.stack.imgur.com/S5khV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S5khV.jpg" alt="enter image description here"></a></p>