Widgets do not line up

[alex-bork]

Checklist

• I have searched the existing issues for similar issues.
• I added a very descriptive title to this issue.
• I have provided sufficient information below to help reproduce this issue.

Summary

Hi,
I try to line up Widgets in 3 seperate columns. Unfortunately that does not work:

I have found a solution for the text. I could add "######" to the same column and the text would line up with the text_input, but the button has still the problem:

Best Regards

Reproducible Code Example

for header in headers:
    value = st.session_state.request_headers[header]
    col1, col2, col3 = st.columns([0.3, 0.6, 0.1], vertical_alignment="center")
    with col1:
        "######"
        st.markdown(f"{header}")
    with col2:
        st.text_input("", value=value, key=f"headers{header}")
    with col3:
        # st.markdown("######") -> this does not help for the button
        st.button("", key=f"header_del_{header}", on_click=delete_header, args=[header], icon=":material/clear:")

Steps To Reproduce

No response

Expected Behavior

No response

Current Behavior

No response

Is this a regression?

• Yes, this used to work in a previous version.

Debug info

• Streamlit version:
• Python version:
• Operating System:
• Browser:

Additional Information

No response

[github-actions]

If this issue affects you, please react with a 👍 (thumbs up emoji) to the initial post.

Your feedback helps us prioritize which bugs to investigate and address first.

[alex-bork]

and with solution where I use "#####" in order to shift the text down I now have big spaces between the rows:

[alex-bork]

using text or markdown instead of text_input looks good:

[jrieke]

Hey! This is because the text input still shows an (empty) label above it. You can get rid of that with label_visibility="collapsed". This also allows you to actually set a label on the text input (which is great for accessibility!) but not show it in the UI. So you could do something like this:

st.text_input(f"{header} value", value=value, key=f"headers{header}", label_visibility="collapsed")

Let me know if that works so we can close this issue. We also want to work more on layout solutions in the next few months, so I added this issue to our internal notes on that!

[lukasmasuch]

Also, vertical_alignment="bottom" might work better in this case.

[jrieke]

Also, vertical_alignment="bottom" might work better in this case.

Yeah I thought so too in the beginning, but the label on the left side doesn't look good anymore in that case because it's misaligned with the widget placeholder text.