Bottom button alignment
by Soviut
HTML
<div class="row">
<div class="column">
<h2>This is a Row Heading</h2>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at cursus ligula, rutrum lacinia tortor. Curabitur dictum ante ut risus consectetur, eu cursus dui aliquet. Nunc malesuada leo ante, ut iaculis lacus feugiat sit amet. Fusce tincidunt sapien vestibulum suscipit ultrices.
</div>
<a href="#" class="button">Learn More</a>
</div>
<div class="column">
<h2>This is a Row Heading</h2>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at cursus ligula, rutrum lacinia tortor. Curabitur dictum ante ut risus consectetur, eu cursus dui aliquet. Nunc malesuada leo ante, ut iaculis lacus feugiat sit amet. Fusce tincidunt sapien vestibulum suscipit ultrices. Nunc tincidunt, dui eu luctus congue, nisl felis congue augue, eu laoreet dui ex quis lectus.
</div>
<a href="#" class="button">Learn More</a>
</div>
<div class="column">
<h2>This is a Row Heading</h2>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at cursus ligula, rutrum lacinia tortor. Curabitur dictum ante ut risus consectetur, eu cursus dui aliquet. Nunc malesuada leo ante, ut iaculis lacus feugiat sit amet. Fusce tincidunt sapien vestibulum suscipit ultrices.
</div>
<a href="#" class="button">Learn More</a>
</div>
</div>
CSS
body {
font-family: arial, helvetica, san-serif;
}
.row {
display: flex;
}
.column {
display: flex;
flex-direction: column;
width: 33.33%;
padding: 10px;
}
.column .description {
flex-grow: 1;
margin-bottom: 20px;
}
.button {
padding: 20px;
text-align: center;
border: solid 1px #000;
color: #000;
text-decoration: none;
}