Add line break to streamlit text input - streamlit

Question

I have a form I'm building with 3 text inputs on the same row, however one of the descriptions takes 2 lines vs 1 line for the others. This is leading to the input boxes below not being aligned.
I tried adding carriage returns & line breaks special chars to the text input so that the text would start one row lower, but it's not working.
Ends up looking like this ... but I want my input rows aligned.
bla bla bla
bla bla bla
bla bla bla
bla bla bla
Input
Input
Input
Tried the following but not working
msrp = cols[2].text_input("\n\r MSRP")
Any way to add line breaks to the texts so that I can get my input boxes below aligned or some other way to force it?

Answer 1

use cell_renderer to make line break (\n,\t ...) change to <br> take effect.
only test on show data, may not take effect on edit field
from st_aggrid import AgGrid, GridOptionsBuilder, JsCode
gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_default_column(
editable=True, wrapText=True, autoHeight=True // here is the key point
)
cell_renderer = JsCode("""
function(params) {
return params.value.replaceAll("\\n","<br>"); // here is the key point
}
""")
gb.configure_column('hash_code', cellRenderer=cell_renderer,maxWidth=200)
gbb = gb.build()
AgGrid(df, gbb, height=1000, allow_unsafe_jscode=True, theme='blue')
more detail :
https://ag-grid.com/javascript-data-grid/row-height/
https://www.ag-grid.com/javascript-data-grid/component-cell-renderer/

Answer 2

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
align-items: end;
}
.col {
padding: 15px;
}
<div class="grid">
<div class="row">
<div class="col">
<label>blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá</label>
<input asp-for="First_Name_AR" class="form-control" />
</div>
</div>
<div class="row">
<div class="col">
<label>blá blá blá</label>
<input asp-for="Second_Name_AR" class="form-control" />
</div>
</div>
<div class="row">
<div class="col">
<label>blá blá blá</label>
<input asp-for="Father_Name_AR" class="form-control" />
</div>
</div>
</div>