streamlit确保左右两列的行高相同

在 Streamlit 中，可以使用自定义 CSS 样式来确保左右两列的行高相同。具体来说，可以为左右两列的元素添加一个相同的类名，然后使用 CSS 样式来设置这个类的行高。

以下是一个示例代码：

import streamlit as st

# 添加自定义 CSS 样式
st.write("""
    <style>
    .myclass {
        display: flex;
        flex-direction: row;
    }
    .myclass > * {
        flex: 1;
    }
    .myclass > *:not(:first-child) {
        margin-left: 10px;
    }
    .myclass > * > div {
        height: 100%;
    }
    </style>
""", unsafe_allow_html=True)

# 使用自定义 CSS 样式
st.write("<div class='myclass'>")
st.write("<div><h1>Column 1</h1><p>Some text here.</p></div>")
st.write("<div><h1>Column 2</h1><p>Some more text here.</p></div>")
st.write("</div>")

在上面的示例中，我们添加了一个自定义 CSS 样式，它包含了四个规则：

- `.myclass` 规则将左右两列的元素包裹在一个具有 `display: flex; flex-direction: row;` 样式的容器中，使它们成为一行。
- `.myclass > *` 规则将左右两列的元素设置为等宽，并且它们之间有一个 10 像素的左边距。
- `.myclass > * > div` 规则将左右两列元素内部的 `div` 元素的高度设置为 100%，从而确保它们的行高相同。

最后，我们在应用程序中使用 `<div class='myclass'>` 标记来将左右两列的元素包裹起来，以便应用自定义 CSS 样式。这样就可以确保左右两列的行高相同，并使应用程序看起来更加整洁和一致。