How to vertically align Bootstrap 4 card title text to bottom

Community
#1

I have four Bootstrap 4 cards lined up, but the title for just one of the cards wraps to a second line. How can I code this so that all four card titles are flush bottom?

I tried setting the height of each card to a certain pixel height and then applied vertical-align: bottom, but that’s not working.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />

<div class="container">
  <div class="card-group">
    <div class="card img-fluid">
      <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
      <div class="card-img-overlay">
        <h5 class="card-title">FIRST CARD</h5>
        <hr>
        <p class="card-text">Tech virtual drone online browser platform through in a system. Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
      </div>
    </div>
    <div class="card img-fluid">
      <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
      <div class="card-img-overlay">
        <h5 class="card-title">SECOND CARD</h5>
        <hr>
        <p class="card-text">But stream software offline. Professor install angel sector anywhere create at components smart.</p>
      </div>
    </div>
    <div class="card img-fluid">
      <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
      <div class="card-img-overlay">
        <h5 class="card-title">THIRD CARD WITH MUCH LONGER TITLE</h5>
        <hr>
        <p class="card-text">Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
      </div>
    </div>
    <div class="card img-fluid">
      <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
      <div class="card-img-overlay">
        <h5 class="card-title">FOURTH CARD</h5>
        <hr>
        <p class="card-text">Now digital designs id anywhere atoms. Now strategy startups documents designs. Venture crypto adopters niche. Video algorithm system ultra-private policies engineering.</p>
      </div>
    </div>
  </div>
</div>

Here’s a Codepen: https://codepen.io/Codewalker/pen/RXxaVMIndustrial dining table