Vertically align elements between bootstrap rows - css

Question

This is a JSFiddle that shows my attempt at positioning 3 buttons at the bottom of 3 columns. I have used flexbox to make sure that all 3 columns have the same height, but in order to make the buttons positioned at the bottom of each column, I had to make them absolutely positioned. As a result, the size of the buttons, is not taken in account for the column's size. Is there any proper way to avoid that (without using placeholder elements/margins/etc)?
HTML:
<div class="container">
<div class="row row-same-height">
<div class="col-md-4">
<h2>Responsive</h2>
<!--<h4> εξαρτημένη από το ένα άκρο </h4>-->
<p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id varius leo. Aliquam erat volutpat. Proin tempor lorem et dolor sollicitudin, in dignissim arcu blandit. Nullam consectetur rutrum pretium. Vivamus imperdiet elementum neque,
vel volutpat leo mattis in. Nam luctus pellentesque dui sed vulputate. Curabitur faucibus fringilla lectus, ut aliquet mauris dictum facilisis.</p>
<p class="stick-to-bottom"><a class="btn btn-primary" href="per1.html" role="button">View
details »</a></p>
</div>
<div class="col-md-4">
<h2>But</h2>
<p style="text-align: justify">Aliquam id congue libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ullamcorper sapien nulla, eget fermentum est mattis non. Morbi tortor tellus, sollicitudin quis nisi at, hendrerit faucibus nisl. Aenean consequat felis
urna, ut eleifend sapien tempus a. Phasellus porta mi non venenatis condimentum. Aliquam ut dolor eleifend, maximus quam vitae, scelerisque leo. Praesent metus est, lobortis eget urna a, luctus condimentum eros. Curabitur gravida maximus augue
molestie ultricies. Mauris ac urna ac lorem sagittis auctor. Etiam facilisis rhoncus sapien, at aliquam ligula euismod ac. Vestibulum quis condimentum neque. Morbi ornare aliquam consectetur. Mauris ipsum ligula, vulputate sed tristique hendrerit,
pellentesque fringilla nisl.</p>
<p class="stick-to-bottom"><a class="btn btn-primary" href="per2.html" role="button">View
details »</a></p>
</div>
<div class="col-md-4">
<h2>Wrong</h2>
<p style="text-align: justify">Duis eu nibh viverra, pretium risus id, egestas odio. Suspendisse potenti. Praesent aliquet massa sit amet nunc bibendum pellentesque. Mauris consectetur auctor magna vel consequat. Aliquam sit amet nunc quam. Vivamus eu nisi ac est viverra vehicula
lobortis sit amet lorem. Cras ut pellentesque nisi. Curabitur ornare imperdiet quam sit amet efficitur. Vivamus viverra felis at bibendum aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec
vestibulum, quam id efficitur consequat, ipsum dolor sollicitudin augue, id mollis erat risus quis urna. Integer aliquet suscipit orci, vehicula cursus lectus malesuada in. </p>
<p class="stick-to-bottom"><a class="btn btn-primary" href="per3.html" role="button">View
details »</a></p>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row row-same-height">
<div class="col-md-4">
<h2>Looks as intended</h2>
<!--<h4> εξαρτημένη από το ένα άκρο </h4>-->
<p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id varius leo. Aliquam erat volutpat. Proin tempor lorem et dolor sollicitudin, in dignissim arcu blandit. Nullam consectetur rutrum pretium. Vivamus imperdiet elementum neque,
vel volutpat leo mattis in. Nam luctus pellentesque dui sed vulputate. Curabitur faucibus fringilla lectus, ut aliquet mauris dictum facilisis.</p>
</div>
<div class="col-md-4">
<h2>But</h2>
<p style="text-align: justify">Aliquam id congue libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ullamcorper sapien nulla, eget fermentum est mattis non. Morbi tortor tellus, sollicitudin quis nisi at, hendrerit faucibus nisl. Aenean consequat felis
urna, ut eleifend sapien tempus a. Phasellus porta mi non venenatis condimentum. Aliquam ut dolor eleifend, maximus quam vitae, scelerisque leo. Praesent metus est, lobortis eget urna a, luctus condimentum eros. Curabitur gravida maximus augue
molestie ultricies. Mauris ac urna ac lorem sagittis auctor. Etiam facilisis rhoncus sapien, at aliquam ligula euismod ac. Vestibulum quis condimentum neque. Morbi ornare aliquam consectetur. Mauris ipsum ligula, vulputate sed tristique hendrerit,
pellentesque fringilla nisl.</p>
</div>
<div class="col-md-4">
<h2>Not Responsive</h2>
<p style="text-align: justify">Duis eu nibh viverra, pretium risus id, egestas odio. Suspendisse potenti. Praesent aliquet massa sit amet nunc bibendum pellentesque. Mauris consectetur auctor magna vel consequat. Aliquam sit amet nunc quam. Vivamus eu nisi ac est viverra vehicula
lobortis sit amet lorem. Cras ut pellentesque nisi. Curabitur ornare imperdiet quam sit amet efficitur. Vivamus viverra felis at bibendum aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec
vestibulum, quam id efficitur consequat, ipsum dolor sollicitudin augue, id mollis erat risus quis urna. Integer aliquet suscipit orci, vehicula cursus lectus malesuada in. </p>
</div>
</div>
<div class="row">
<p class="col-md-4"><a class="btn btn-primary" href="per1.html" role="button">Viewdetails »</a></p>
<p class="col-md-4"><a class="btn btn-primary" href="per2.html" role="button">View details »</a></p>
<p class="col-md-4"><a class="btn btn-primary" href="per3.html" role="button">View details »</a></p>
</div>
</div>
CSS:
.row-same-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.stick-to-bottom {
position: absolute;
bottom: 0;
}

Answer 1

You're already using flexbox, so use flexbox. Why on earth would you absolutely position?
All you'll need is to flex the columns vertically (use flex-direction: column) and use justify-content: space-between. You'll also probably want to put: flex: 1 on the <p> tags that have the text content in them (since the content varies in length):
.row-same-height .col-md-4 {
display: flex;
flex-flow: column nowrap; /* a shorthand for `flex-direction` and `flex-wrap` */
justify-content: space-between;
}
.row-same-height p:first-of-type {
flex: 1;
}
And add whatever vendor prefixes you like. Here's your updated Fiddle. Cheers!