Styling grids in div block

Hi everyone,

I’m quite new to designing websites and I haven’t had any formal training (I’m a marketer, not a web designer).
However, I’ve worked on our company’s site for the past year and I’m getting stuck with styling grids in a div block.

Can anyone help?

Recently, our brand team wanted me to update our team’s page and we previously used a grid to display 4 members of our team per row. Now, they want me to add all of the people to a dropdown. I’ve already used a dropdown before, so I just copied over what I had, but now it seems the styling is off. More specifically, we use div blocks in our grids per team member. In it, we use a picture, their name, and job title. Everything seems quite responsive, but the page looks at the length (width) of names (and other text blocks) to style the elements making each row different sizes.

I’ve tried changing the display + aligning the grid differently, but I can’t figure it out.
Does anyone know how to make sure that all of the elements align correctly?

If you look at the dropdown “Talketeers” it’s quite clear that the first row of people does not align with the second row (and there are some more places where that happens).

Thanks in advance!


The page: Meet The Team | Talk360
Read only version: https://preview.webflow.com/preview/staging-talk360?utm_medium=preview_link&utm_source=designer&utm_content=staging-talk360&preview=2a4c890bbe40c9ee70ad0fecd597e195&pageId=614435d39e308d51478cb7c7&workflow=preview

I solved it since. I hadn’t thought of putting the width to 100% :sweat_smile: