Pin un elemento flexible en la parte inferior del contenedor
Tengo 4 bloques con un título, descripción y un botón.
Quiero mantener el Título y la Descripción alineados en la parte superior, y el Botón para alinearlos en la parte inferior, sin importar cuánto tiempo sea la descripción o el título.
También necesito mantener la misma estructura HTML.
Imagen de muestra de lo que realmente necesito:
¿Alguien puede resolverlo? No encontré una solución en Internet hasta ahora.
/* 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>