Equal Height Containers

Hi all,

I’ve looked so much for this but can’t find anything that works!

All I want to do is to make each card/container the same height with the content spaced correctly. I would like to line up the content (vertically) so the buttons are all on the same ‘line’ and the main parent containers are the same height. I’ve attached an image so you can see what I mean!

Many Thanks!
Tom

Display Flex and space-between?

.parent {
  display: flex;
  flex-direction:column;
  justify-content: space-between;
}

As an example have a look at these codepens:

https://codepen.io/hus_hmd/pen/KGydqX

https://codepen.io/mcraiganthony/pen/NxGxqm

Thanks for the reply!

That is exactly what I thought it was! but it just doesn’t want to work!

It’s a simple Block Element > Content Template - the title, date, excerpt and button are in a container of their own.

Just can’t see why it doesn’t work!

I believe you’ll need to move the button outside of the container you’ve wrapped the content with, then add styles to the button container to make it look the same as your screenshot again.

Like this:
blocks-setup

Then this snippet should work Grid items with different content heights & aligned bottom block

Hi @DigitalTom,

Can you share the link to the site in question?

So, between your excerpt and button you have a space-between and the item is flex and still does not work? (with excerpt and button self contained in their own container and that container is display: flex)