title: Struggling to style and format Dash using Plotly
body: <p>This is my current dashboard:</p>
  <p><a href="https://i.stack.imgur.com/U8NEU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U8NEU.png" alt="enter image description here" /></a></p>
  <p>I am trying to format my dashboard like this:</p>
  <p><a href="https://i.stack.imgur.com/YcdDi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YcdDi.png" alt="enter image description here" /></a></p>
  <p>Where the funnel matches the distance up to the last dash component I decide to use on the right.</p>
  <p>The callbacks and functionality are all tied to a local db so I modified the sample code to just use a fixed funnel. However, all the callbacks and functionality is working properly. The only issue is styling.</p>
  <pre><code>from dash import Dash, dcc, html, Input, Output
  import datetime as dt
  import plotly.graph_objects as go
  import pandas as pd
  import dash_bootstrap_components as dbc
  
  
  x = ['10000','450','200','10']
  
  # Initialize
  
  app = Dash()
  
  ################################################################################
  # LAYOUT
  ################################################################################
  
  app.layout = html.Div(
      [
          # Header
          html.Div(
              [
                  html.H4(&quot;Funnel Dashboard&quot;,style={'textAlign': 'center'}),
                  html.P(
                      &quot;This app allows a user to dynamically create page view funnels based on __ data (updated daily)&quot;,
                      style={'textAlign': 'center'}
                      )
  
              ]
          ),
          # Main Div
          html.Div(
              [
                  html.Div(
                      [   
                          # Funnel
                          html.Div([html.H4(&quot;Funnel Visualization&quot;)]),
                          dcc.Graph(id='my_funnel')
                      ],
                      style={'width': '30%', 
                             'textAlign': 'left',
                             'display': 'inline-block',
                             'vertical-align':'top',
                              'margin-left': '3vw', 
                              'margin-top': '3vw'
                             }
                  ),
                  # Filters and Inputs
                  html.Div(
                      [   
                          html.H4(&quot;Please Select a Date Range&quot;),
                          dcc.DatePickerRange(
                              id='date-picker-range',
                              start_date=dt.datetime(2022, 1, 1, 0,0),
                              end_date=dt.datetime.today()
                              ),
                          html.H4(&quot;Please Select Page Milestones&quot;),
                          html.P(&quot;Please provide a comma delimited list of your desired pages using each page's initial url subdirectory:&quot;),
                          dcc.Textarea(
                              id='pid_array',
                              placeholder='cart.php,checkout,...',
                              value='',
                              style={'width': '50%'}
                              )
                      ], 
                      style={'width': '30%', 
                             'textAlign': 'right',
                             'display': 'inline-block'}
                  )
              ]
          ),
      ],
  )
  
  
  ###############################################################################
  #INTERACTION CALLBACKS
  ###############################################################################
  
  @app.callback(Output('my_funnel', 'figure'),
                [Input('date-picker-range', 'start_date'),
                 Input('date-picker-range', 'end_date'),
                 Input('pid_array','value')
                 
                 ])
  
  def execute_funnel(start_date,end_date,pid_string):
     if not start_date or not end_date:
          raise dash.exceptions.PreventUpdate
     else:
          return ({'data': [
                          go.Funnel(
                              x = ['10000','450','200','10'],
                              y = ['A','B','C','D']
                          )
                  ]
          })
  
  
  if __name__ == '__main__':
      app.run_server()
  </code></pre>