How to make flex box CMS items equal height with hide/show interaction

Hi! I’m trying to have our “meet our team” section where we showcase our two members, their div blocks to align with one another and be the same length. If is set a minimum length it doesn’t optimize for mobile so that doesn’t work.

I’m also using an interaction with the “read more button”. I want the length of the boxes to be the same when the read more is showing, and also the same length when the boxes expand to show the extra text.

Please let me know if you can figure this out!


Here is my site Read-Only: https://preview.webflow.com/preview/cleatstreet?utm_medium=preview_link&utm_source=designer&utm_content=cleatstreet&preview=0336a2cce15295c8f0dd1e719fcb267b&pageId=5e479dd19415a67fab8db7d2&mode=preview
(how to share your site Read-Only link)

Hey @summerslough,

Unfortunately, I cannot help you figure out why it’s happening… as I don’t quite understand it… but to fix the issue you can put your div block to 100%:

AND your collection list put to flexbox Horizontal.

image

Hope this helps

This worked wonders thank you!

Do you know how to make the “read more” be in line with each other as well?

You’re welcome!

Yup, I was able to figure it out. First thing, since you are using animation for your read more to reveal the text, you can hide the text you are going to reveal to get it out of the way. It makes the rest of your elements easier to handle.

image

Next, jump up to your Div block 182 and set it to flex layout, verticle and stretch.

image

Hope that helps :slight_smile:

Thanks so much!! Works perfectly.

1 Like