Vertical Alignment Within Container

Inside an expander I am attempting to keep various components vertically aligned. For example, below all the content is aligned, top to bottom.

Once multiple selections are made, the numerical values are no longer vertically aligned.

The red boxes represent two st.container objects. I was hopeful that might keep components aligned top to bottom.

Any suggestions?

Thanks

Separate containers/columns for each row should keep alignment. Can you share your code?

Something like this should work:

import streamlit as st

with st.expander('Options'):
    row1 = st.columns(2)
    row2 = st.columns(2)
    row3 = st.columns(2)

options = [f'Description {i}' for i in range(10)]

row1[0].multiselect('a',options)
row1[1].multiselect('b',options)
row2[0].multiselect('c',options)
row2[1].multiselect('d',options)
row3[0].multiselect('e',options)
row3[1].multiselect('f',options)

Thank you, let me give that approach a try.

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.