Columns not adjusting its size when title has two lines on Mobile

Hi all.

I have some columns on my website which on desktop are horizontal and on mobile are vertical. The column 1 is a title, the column 2 is text. They look like this on Mobile:

Screenshot 2020-12-16 at 19.00.01

My issue is when the title is a bit longer, and this happens:

Screenshot 2020-12-16 at 18.59.55

I’ve tried to change the padding but obviously it gets too big when the title is shorter. Is there any way of making it dynamic, so the column adjusts depending on the title’s size?

Here is my read-only link: https://preview.webflow.com/preview/cultourista?utm_medium=preview_link&utm_source=designer&utm_content=cultourista&preview=62bdb5e0cfcfb35da28d2998d0a8d1df&mode=preview

Thank you so much in advance for your help!

Check the height on your heading specifically. I’d you have a fixed height, then when the text wraps the height is remaining the same despite being on two lines, which then eats up your padding.

Hey Drew - I don’t have any height specified :slightly_frowning_face:. I was wondering if it could be the layout? Should it be flex? I tried, but it didn’t work either - but I might be doing something wrong. Thanks for your help!