I have 4 blocks with a title, description and a button.
I want to keep Title and Description aligned on top, and the Button to be aligned on bottom no matter how long the description or title is.
I also need to keep the same HTML structure.
Sample picture of what I actually need:
Can somebody figure it out? I didn't find a fix on internet so far.
/* FLEXBOX RELATED */
.grid {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.block {
flex: 0 24%;
display: flex;
}
.container {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
}
.title {
flex: 0 100%;
}
.desc {
flex: 0 100%;
}
.button {
flex: 0 100%;
align-self: flex-end;
}
/* NO FLEXBOX RELATED */
.block {
background-color: #ccc;
}
.title {
font-size: 2rem;
font-weight: bold;
padding: 0.5rem;
text-align: center;
}
.desc {
background-color: grey;
padding: 0.5rem;
}
.button {
padding: 0.5rem;
color: blue;
text-align: center;
font-weight: bold;
}<div class="grid">
<div class="block">
<div class="container">
<div class="title">Title 1</div>
<div class="desc">Description Description Description Description Description Description Description Description Description Description</div>
<div class="button">Button</div>
</div>
</div>
<div class="block">
<div class="container">
<div class="title">Title 2</div>
<div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>
<div class="button">Button</div>
</div>
</div>
<div class="block">
<div class="container">
<div class="title">Title 3</div>
<div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>
<div class="button">Button</div>
</div>
</div>
<div class="block">
<div class="container">
<div class="title">Title 4</div>
<div class="desc">Description Description Description Description Description Description Description Description Description Description</div>
<div class="button">Button</div>
</div>
</div>
</div>