<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="row services">
<div class="small-3 panel columns service">
<h3>Great</h3><p>Ok this Lorem will be the shortest
<br> <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, ad?</p>
<div class="button">Read More</div>
</div>
<div class="small-3 panel columns service">
<h3>Better</h3><p> This is the middle Lorem and it will be the longest one just to reflect the smart sizing of Flex MAGIC!
<br> <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, ad? </p>
<div class="button">Read More</div>
</div>
<div class="small-3 panel columns service">
<h3>Best</h3><p>Iste architecto omnis, esse facere quod ratione, officia veritatis fugit.</p>
<div class="button">Read More</div>
</div>
<div class="small-3 panel columns service">
<h3>Awesome</h3><p>Ducimus voluptates assumenda, illum adipisci sed quaerat est ipsum nisi.</p>
<div class="button">Read More</div>
</div>
</div>
.services {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.service {
display: flex;
flex-flow: column wrap;
align-items: center;
flex: 1 0 300px; /* Play with this value */
margin: 5px;
}
.service p {
padding: 25px;
flex: 1; /* <-- this makes all the difference */
}
.button {
/* nothing here -_- */
}
