How to move Altair dropdown to under the legend dynamically (for every screen size)

Question

it's been a while that i have done CSS coding so i need help. i want to move the drop down list from under the chart to under the legend. Dataframe:

data = {
    'Adj Close': [1.308934, 2.169581, 2.876765, 2.357847, 2.179156],
    'Yahoo Finance return': [0.670226, 1.298566, 0.920492, -0.721652, -0.306659],
    'date_x': ['2015-01-01', '2015-02-01', '2015-03-01', '2015-04-01', '2015-05-01'],
    'Return in USD': [-0.641970, 0.428617, 0.404568, 0.125614, 0.070045]
}

# Convert the dictionary into a DataFrame
df = pd.DataFrame(data)

# Make sure that 'date_x' is a datetime column
df['date_x'] = pd.to_datetime(df['date_x'])

my code for creating the table:

final_melted = final.melt(id_vars=['date_x'], var_name='Metric', value_name='Value')
selection_metric_1 = alt.binding_select(options=['Adj Close', 'None','Yahoo Finance return',  'Return in USD'], name='Metric 1 ')
select_metric_1 = alt.selection_single(fields=['Metric'], bind=selection_metric_1, name="Selector 1")

# Dropdown selection for the second metric
selection_metric_2 = alt.binding_select(options=['Adj Close','None', 'Yahoo Finance return',  'Return in USD'], name='Metric 2 ')
select_metric_2 = alt.selection_single(fields=['Metric'], bind=selection_metric_2, name="Selector 2")

# Dropdown selection for the third metric
selection_metric_3 = alt.binding_select(options=['Adj Close','None', 'Yahoo Finance return', 'Return in USD'], name='Metric 3 ')
select_metric_3 = alt.selection_single(fields=['Metric'], bind=selection_metric_3, name="Selector 3")

line_chart = alt.Chart(final_melted).mark_line().encode(
    x='date_x:T',
    y=alt.Y('Value:Q', axis=alt.Axis(title='Metric Value')),
    color='Metric:N'
)

# Points layer, making it easier to hover over individual points
points = alt.Chart(final_melted).mark_point().encode(
    x='date_x:T',
    y='Value:Q',
    color='Metric:N',
    tooltip=['date_x:T', 'Value:Q', 'Metric:N']
).properties(
    width=1600,
    height=800
)

# Conditional filters based on the selection
filtered_chart = alt.layer(line_chart, points).add_selection(
    select_metric_1,
    select_metric_2,
    select_metric_3  # Add the third selection here
).transform_filter(
    select_metric_1 | select_metric_2 | select_metric_3  # Apply the filter based on the third selection as well
).interactive()

configured_chart = filtered_chart.configure_axis(
    titleFontSize=15,  # Adjust the size as needed for axis titles
    labelFontSize=15  # Adjust the size as needed for axis labels
).configure_legend(
    titleFontSize=15,  # Adjust legend title size
    labelFontSize=12  # Adjust legend labels size
).configure_title(
    fontSize=24  # Adjust chart title size
).configure_legend(
    titleFontSize=17,  # Adjust the font size for the legend title
    labelFontSize=15   # Adjust the font size for the legend labels
)

i know that i shoulk use CSS but i could figure out the absolute positioning and not dynamically. Therefor now when the screen size changes it moves constantly.

form.vega-bindings {
  position: absolute;
  right: 0px;
  top: 350px;
}

would appreciate any help