I have 3 components in a row and I want their buttons be aligned at the bottom of containers. However each container has different text so it's height is not fixed and we don't want to strict the height.
How can I achieve alignment of the containers only by css and compatible with IE9 as well?
.container-of-3 > div{
float: left;
width: 33.33333333333%;
> img{
margin-left: calc((100% - 90px)/2);
}
}
.button-link{
background-color: #69be28;
color: #fff;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem;
padding-right: 1rem;
text-decoration: none;
border-radius: 5px;
}
<div class="container-of-3">
<div>
<img src="http://placehold.it/90x90" class="" alt="">
<h5 class="">Hybrid Cloud</h5>
<p class="">Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut.
Tibique percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. Nusquam oportere
vituperata id cum, adipisci persecuti an pro. Eu vim facer graecis, id nec dicta integre interpretaris</p>
<div class="text-align__center">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
<div>
<img src="http://placehold.it/90x90" class="" alt="">
<h5>Hybrid Cloud</h5>
<p>Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique
percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. </p>
<div class="text-align__center">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
<div>
<img src="http://placehold.it/90x90" class="" alt="">
<h5>Hybrid Cloud</h5>
<p>Lorem ipsum dolor sit amet</p>
<div class="text-align__center">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
</div>
bottom: 0