title: Layout and Dropdown menu in Dash - Python
body: <p>I cannot seem to be able to get the layout of my dropdown menu boxes correctly. Basically I want for the dropdown box to be on the right of their matching question and on the same line.</p>
  
  <p>Can anyone help please?</p>
  
  <p>I have tried multiple combinations of style={'display': 'inline-block', 'width:'X%'} and className = 'X columns' with no luck.</p>
  
  <pre><code>import dash
  from dash.dependencies import Input, Output, State
  import dash_core_components as dcc
  import dash_html_components as html
  import dash_auth
  
  external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
  app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
  
  app.layout = html.Div([
  html.Div(
              [   
                  html.Div(
                      [
                          html.H6("""Select your current industry""", 
                          style={'textAlign': 'right', 'font-weight':'bold', 'margin-left': '0em', 'margin-right': '2em', 'display': 'inline-block', 'width': '40%'})
                      ],      
                      ),
  
                  dcc.Dropdown(
                              id = 'business_area_dropdown',
                              options=[
                                  {'label': 'Academia', 'value': 'academia'},
                                  {'label': 'Energy', 'value': 'energy'},
                                  {'label': 'Research', 'value': 'research'}
                              ],
                              placeholder="Select Business Area",
                              style = dict(
                              width = '40%',
                              display = 'inline-block',
                              verticalAlign = "middle"
                              )
                          )
  
              ],
              className='row'
          ),
  
      html.Div(
              [   
                  html.Div(
                      [
                          html.H6("""Are you happy where you are?""", 
                          style={'textAlign': 'right', 'font-weight':'bold', 'margin-left': '0em', 'margin-right': '2em', 'display': 'inline-block', 'width': '40%'})
                      ],      
                      ),
  
                  dcc.Dropdown(
                              id = 'search_preference',
                              options=[
                                  {'label': 'Yes', 'value': 'yes'},
                                  {'label': 'No', 'value': 'no'}
                              ],
                              placeholder="Select Answer",
                              style = dict(
                              width = '40%',
                              display = 'inline-block',
                              verticalAlign = "middle"
                              )
                          )
  
              ],
              className='row'
          ),],
  
      style={'display': 'inline-block', 'backgroundColor': '#fff7dd', 'width': '99%'}
  
      )
  
  
  if __name__ == '__main__':
      app.run_server()
  </code></pre>
  
  <p>The dropdown boxes appear in a completely different line. I'd like for the dropdown boxes to be aligned horizontally to their respective questions to be answered.</p>