How to place dropdowns side by side in Dash,Python

Question

I'm pretty new to dash and trying to place two dropdowns side by side each other but they don't seem to work at all, instead they are below each other. I think I'm messing up in 'className' arrangement of HTML div's. The code is as follows:

app.layout = html.Div([

html.Div( [

    html.H1("Web Application Dashboards with Dash", style={'text-align': 'center'}),

 ] ),

html.Div(
className = "row",children =[
    html.Div(className='six columns', children=[
        dcc.Dropdown(
            id='dropdown_dataset',
                    options=[
                        {'label': 'diabetes', 'value': 'diabetes'},
                        {'label': 'Custom Data', 'value': 'custom'},
                        {'label': 'Linear Curve', 'value': 'linear'},
                    ],
                    value='diabetes',
                    clearable=False,
                    searchable=False,
        )])
    ,html.Div(className='six columns', children=[
        dcc.Dropdown(
        id='dropdown_dataset_2',
        options=[
            {'label': 'sinh', 'value': 'sinh'},
            {'label': 'tanh', 'value': 'cosh'},
        ],
        value='diabetes',[![enter image description here][1]][1]
        clearable=False,
        searchable=False,
    )])
  ])
  ])



  if __name__ == '__main__':
        app.run_server(host='127.0.0.1',port = '5000',debug=False,use_reloader=False)

Can you point where I'm making the mistake and is there any documentation to refer for this ?

Answer 1

This will do it. I've added display='flex' to the div that contains both dropdowns, and set the width to 50% for the divs that contain only single dropdowns. You could certainly set those styles in your CSS file using the IDs or classnames instead of coding them inline like this.

    html.Div(
        className="row", children=[
            html.Div(className='six columns', children=[
                dcc.Dropdown(
                    id='dropdown_dataset',
                    options=[
                        {'label': 'diabetes', 'value': 'diabetes'},
                        {'label': 'Custom Data', 'value': 'custom'},
                        {'label': 'Linear Curve', 'value': 'linear'},
                    ],
                    value='diabetes',
                    clearable=False,
                    searchable=False,
                )], style=dict(width='50%'))
            , html.Div(className='six columns', children=[
                dcc.Dropdown(
                    id='dropdown_dataset_2',
                    options=[
                        {'label': 'sinh', 'value': 'sinh'},
                        {'label': 'tanh', 'value': 'cosh'},
                    ],
                    value='diabetes',  # [![enter image description here][1]][1]
                    clearable=False,
                    searchable=False,
                )], style=dict(width='50%'))
        ], style=dict(display='flex'))