✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Unable to position a dash component on the top of the page

Hello. have problems with the layout of a dash app. I am trying to place the radio items on the same height as the dropdown on the right side, but I can’t do it. I have an image of where is it and where i would like it to be (where the blue arrow is).

Below is my code:

pp.layout = html.Div( [
    html.Div( [
        html.Label( ['Choose below'], style={'font-weight': 'bold'} ),
        dcc.Dropdown(
            id='drop1',
            options=[{'label': x, 'value': x} for x in df.sort_values( 'CONT' )['CONT'].unique()],
            value='Western Europe',
           ),
        dcc.Dropdown(
            id='drop2',
            options=[{'label': x, 'value': x} for x in df16.sort_values( 'CONT' )['CONT'].unique()],
            value='North America',
             ),
        dcc.Dropdown(
            id='drop',
            options=[{'label': x, 'value': x} for x in df.sort_values( 'CONT' )['CONT'].unique()],
            value='Sub-Saharan Africa',
             ),

    ] ),
    html.Div( [
        html.Label( ['Choose x_axis'], style= {'font-weight': 'bold', 'display':'flex', 'justifyContent':'center', 'width' : '120%',
                                                                  'text-align': 'center'},
                   ),

        dcc.RadioItems(
            id='radio_items',
            options=[
                {'label': 'Economic Status', 'value': 'graph1'},
                {'label': 'Social Support', 'value': 'graph2'},
            ],
            value='graph1',
            style=dict( display='flex', justifyContent='center' , width = '120%', height = '100%'),

        ),
    ] ),



] )