col equal height - last item bottom

by mimii

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">

<div class="container-fluid p-5">
  <div class="row"> 
    <div class="col-md-4 text-center">
      <div class="border h-100 pb-5">
        <img src="https://via.placeholder.com/150">
        <h2>Normal Text col-1</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
        <p class="my-3 btn-bottom"><a class="btn btn-primary" href="#">Button</a></p>
      </div>
    </div> 
    <div class="col-md-4 text-center">
      <div class="border h-100 pb-5">
        <img src="https://via.placeholder.com/150">
        <h2> Less Text col-2</h2>
        <p>Lorem ipsum dolor sit amet.</p>
        <p class="my-3 btn-bottom"><a class="btn btn-primary" href="#">Button</a></p>
      </div>
    </div>  
    <div class="col-md-4 text-center">
      <div class="border h-100 pb-5">
        <img src="https://via.placeholder.com/150">
        <h2>More text col-3</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
        <p class="my-3 btn-bottom"><a class="btn btn-primary" href="#">Button</a></p>
      </div>
    </div>      
  </div>
</div>

CSS

p.btn-bottom {
  position: absolute;
  bottom:0;
  margin: 0 auto;
  width:100%;
}