title: Align dash core components horizontally
body: <p>I want to align two Dropdown menus and a DatePickerRange horizontally. But with the following code:</p>
  <pre><code>import dash
  import dash_core_components as dcc
  import dash_html_components as html
  
  external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
  
  style_dict = dict(width='100%',
                    border='1.5px black solid',
                    height='50px',
                    textAlign='center',
                    fontSize=25)
  
  app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
  
  
  app.layout = html.Div(children=[
      html.H1(children='Hello Dash'),
  
      # placeholder
      html.Div(style={'width': '2%', 'display': 'inline-block'}),
  
      html.Div(
          dcc.Dropdown(
              id = 'start_hour',
              options = [{'label': i, 'value': i} for i in list(range(0,24))],
              style=style_dict,
      ), style={'width': '20%', 'display': 'inline-block'}),
  
      # placeholder
      html.Div(style={'width': '2%', 'display': 'inline-block'}),
                
      html.Div(                         
      dcc.DatePickerRange(
          id='date_picker_range',
          style=style_dict
      ), style={'width': '14%', 'display': 'inline-block', 'fontSize': 20}),
  
      # placeholder
      html.Div(style={'width': '2%', 'display': 'inline-block'}),
      
      html.Div(
          dcc.Dropdown(
              id = 'end_hour',
              options = [{'label': i, 'value': i} for i in list(range(0,24))],            
              style=style_dict                
      ), style={'width': '20%', 'display': 'inline-block'}),        
  
  ])
  
  if __name__ == '__main__':
      app.run_server(debug=False, use_reloader=False)
  
  </code></pre>
  <p>I got this layout:</p>
  <p><a href="https://i.stack.imgur.com/88JnY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/88JnY.png" alt="enter image description here" /></a></p>
  <p>If I zoom in I got this:</p>
  <p><a href="https://i.stack.imgur.com/yEbJx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yEbJx.png" alt="enter image description here" /></a></p>
  <p>Is it possible to force the components to be aligned at the top edge, no matter how I zoom in or out?</p>
  <p>As browser I use Firefox.</p>