Alvarado87 Alvarado87 - 2 months ago 6
CSS Question

Align elements at bottom of div

I want each button "Read more" of each div to be aligned in the same level (and in this case at the bottom of the div). The problem is that I don't want to give a specific height to the divs and neither change any markup or style.

I could use a bunch of pseudo class selectors but I would like to keep the code simple and maybe there's a simpler way.

Here's the working fiddle

.btn{
display: inline-block;
font-family: 'Oswald', sans-serif;
font-weight: 400px;
padding: 5px 10px;
border: 2px solid #1AC4F8;
color: #1AC4F8;
cursor: pointer;}

Answer

One solution entails using flexbox and absolute positioning:

https://jsfiddle.net/aLbu6frL/6/

.row {
  display: flex;
  flex-direction: row;
  padding-bottom:40px;
}
.column {
  flex: 0 0 auto;
  position: relative;
}
.btn-bottom {
  position: absolute;
  bottom: -40px;
  left: 0px;
  right: 0px;
  text-align:center;
}