Formatting pricing cards in Bootstrap

I wanted to make 3 pricing cards arranged in a row, such that their width and height are same.
Also, the sign-up button in each card has to be at the bottom of card (regardless of how much text the card contains) with some comfortable padding.
I have been trying alot but could not find a good method. Help!

Here is my code: (used bootstrap 4.6)

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: normal;
  text-align: center;
}

.container-fluid {
  padding: 7% 15%;
}

.pricing-card {
  padding: 5% 2%;
}

.pricing-plan {
  font-weight: 600;
}

<head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<section id="pricing">
  <div class="container-fluid">
    <div class="row">
      <div class="pricing-card col-lg-4 col-md-6">
        <div class="card h-100">
          <div class="card-header">
            <h3 class="pricing-plan">Chihuahua</h3>
          </div>
          <div class="card-body">
            <h2 class="sub-heading">Free</h2>
            <p>5 Matches Per Day</p>
            <p>10 Messages Per Day</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="sign-up-button btn-lg btn-block btn-outline-dark">Sign Up</button>
          </div>
        </div>
      </div>
      <div class="pricing-card col-lg-4 col-md-6">
        <div class="card h-100">
          <div class="card-header">
            <h3 class="pricing-plan">Labrador</h3>
          </div>
          <div class="card-body">
            <h2 class="sub-heading">$49 / mo</h2>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="sign-up-button btn-lg btn-block btn-dark">Sign Up</button>
          </div>
        </div>
      </div>
      <div class="pricing-card col-lg-4 col-md-12">
        <div class="card h-150">
          <div class="card-header">
            <h3 class="pricing-plan">Mastiff</h3>
          </div>
          <div class="card-body">
            <h2 class="sub-heading">$99 / mo</h2>
            <p>Pirority Listing</p>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="sign-up-button btn-lg btn-block btn-dark">Sign Up</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
</body>

Solution

add this 'd-flex flex-column' two class on the 'card-body'

add this 'mt-auto' class on the 'sign-up-button'.

<div class="card-body d-flex flex-column">
    <h2 class="sub-heading">$99 / mo</h2>
    <p>Pirority Listing</p>
    <p>Unlimited Matches</p>
    <p>Unlimited Messages</p>
    <p>Unlimited App Usage</p>
    <button type="button" class="sign-up-button btn-lg btn-block btn-dark mt-auto">Sign Up</button>
</div>