Change position of a dropdown on the page

Dash Python
1

Hello. I am having problems with the position of a dash component on the page. It’s the ‘change the year’ dropdown as shown in the picture below. I would like it to be where i show with the arrow, whereas it’s below my first radioitem component.

Capture1
Capture11199×225 11.7 KB

My code below:

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets= external_stylesheets  )

# determining the layout of the page
app.layout = html.Div( [
    html.Div( [
        html.Label( ['Change continent:'],
                    style={'font-weight': 'bold', 'display': 'inline-block', 'justifyContent': 'center', 'width': '65%',
                           'height': '100%'},
                    ),

        dcc.RadioItems(
            id='radio_ITEMS',
            options=[
            {'label': 'AMERICA', 'value': 'graph1'},
            {'label': 'EUROPE', 'value': 'graph2'},
            {'label': 'ASIA', 'value': 'graph3'}],
            value='graph1',
    

        ),
    ], className='six columns' ),

    html.Div( [
            html.Label( ['Change the variable:'],
                        style={'font-weight': 'bold', 'display': 'inline-block', 'justifyContent': 'center', 'width': '65%',
                               'height': '100%'},
                        ),

            dcc.RadioItems(
                id='radio_items2',
                options=[{'label': x, 'value': x} for x in cols1],
                value='Happiness Score',
               
            ),
        ], className='six columns' ),
    html.Div( [
        html.Label( ['Change the  year:'], style={'font-weight': 'bold', 'display': 'inline-block'}),
        dcc.Dropdown(id="drop",
                     options=[
                         {"label": "1970", "value": 2015},
                         {"label": "1980", "value": 2016},
                         {"label": "1990", "value": 2017},
                         {"label": "2000", "value": 2018},
                         {"label": "2010", "value": 2019}],
                     multi=False,
                     value=2015,
                     style={"width": "35%"},
                     )]),

    html.Div(
        dcc.Graph( id='the_graph',
                   style={'height': 600, 'width': 1000, }
                   ),
    ),
] ,className= 'fifteen columns')

@app.callback(
    Output( 'the_graph', 'figure' ),
    [Input( 'radio_ITEMS', 'value' ),
     Input( component_id='radio_items2', component_property='value' ),
     Input('drop', 'value')]
1 Like