I need a div to be pushed down when several options from a dcc.dropdown menu have been selected (dash component, python)

I am having trouble making the div below the 'multi' dropdown (dcc.dropdown from dash) to be pushed down when several options from the menu have been selected instead of overlapping as in the image below (or be sent to the back depending on the z-index). The dropdown is inside another div. I´ve tried changing css display and position with no positive outcome yet.

The code looks something like this:

html.Div([
    html.Div(children=html.H2('SIMILAR PLAYERS', className='titulo_ventanah2'), className='titulo_ventana'),

    html.Div(children=[(html.I(className='search')),'Search by:'],style={'display':'inline-block','padding-left':'15%', 'font-size':'13px'}),

    html.Div(children=(dcc.Dropdown(style={'height':'20px', 'font-size':'14px'},persistence_type='session')),style={'display':'inline-block', 'padding':'0px 0px 0px 10px', 'width':'200px', 'margin-top':'5px'}),

    html.Div(children=(dcc.Dropdown(multi=True,style={'height':'20px', 'font-size':'14px'})),style={'padding':'0px 0px 0px 10px', 'width':'400px', 'margin-top':'5px'}, className='similardiv'),

    html.Div([
        html.Div(children=[html.Div(html.H3('Top 15 most similar players',className='titulo_ventanah3'),className='titulo_ventanaint'),

        html.Hr(),

        html.Div([children=dcc.Graph())])],className='similar_players'),
    ])
],className='container1')

There is also CSS code for some components:

.container1 {
  position: fixed;
  width:80%;
  height:100%;
  display:inline-block;  
  left:20%;
  margin: 0 auto;
  padding: 0 0px;
  box-sizing: border-box;
  overflow: hidden;
  top:0;
  overflow:auto;
  background-color: #f5f5f5;
}

.titulo_ventana {
  top:0;
  display:inline-block;
  background-color: #f5f5f5;
  padding-left:2%;
  margin: 0px 0px 0px 0px;
}

.titulo_ventanah2 {
  text-decoration: none;
  font-size: 20px;
  line-height:45px;
  color: #8f8f8f;
  margin: 0px 0px 0px 0px;  
  display: inline-block;
  letter-spacing: 0.01em;
}

.titulo_ventanaint {
  overflow: hidden;
  z-index:5;
  height:39px;
  display:inline-block;
  background-color: white;
}


.titulo_ventanah3 {
  max-width:100%;
  text-decoration: none;
  font-size: 14px;
  color: black;
  line-height:45px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 10px;
  text-align: left;
  overflow:hidden;
  letter-spacing: 0.01em;
}


.similar_players {
  width: 97%;
  overflow: auto;
  height:540px;
  font-size: 15px;
  color: #002e5c;
  background-color: white;
  margin-top:1.5%;
  margin-left:1.5%; 
  display: block;
  position:relative;
  z-index:1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.similardiv {
  position:relative;
  z-index:2;
  display:inline-block;
}

I am hoping the solution is with a change in the display or position property of an element but I believe it has something to do with the default css for the dash component which can be found here.

You can check out the dashboard in link

If I change the position of the .Select-menu-outer to relative as suggested by CBroe in the comments, the following will happen only when the menu is opened: