Bootstrap cards in a div not same height – Html

I have 2 bootstrap cards, and they are wrapped in the cardWrapper div. The problem is one of the cards has more text, so one is taller than the other. I need both of the cards to be the same height.

HTML:

    <div class="cardWrapper">
      <div class="card w-25" style={{ width: "18rem" }}>
        <img
          src="https://www.millenniumeyecenter.com/wp-content/uploads/2020/07/What-is-a-life-coach.gif"
          class="card-img-top"
          alt="..."
        />
        <div class="card-body">
          <h5 class="card-title">Why Work With A Life Coach?</h5>
          <p class="card-text">
            Our most basic need is to progress; evolving and growing towards
            fulfilment. Working with a life coach provides the opportunity to
            create change. The goal is to feel good about who you are and where
            you're headed: to live your best life. Helping people work through
            transitions, relationship issues, family dynamics or self esteem
            issues is what Thrive for Life Coaching is all about.
          </p>
          <a href="/#" class="btn btn-primary">
            Work with me
          </a>
        </div>
      </div>
      <div class="card w-25" style={{ width: "18rem" }}>
        <img
          src="https://cdn.tinybuddha.com/wp-content/uploads/2013/07/Meditating-1.jpg"
          class="card-img-top"
          alt="..."
        />
        <div class="card-body">
          <h5 class="card-title">Live Your Dreams</h5>
          <p class="card-text">
            Many of us realize that life is not what we hoped it might be. Our
            thoughts and beliefs do not always lead us to success and happiness.
            In fact, our thoughts, both positive and negative will predict the
            outcome of our life. Life coaching provides the opportunity to
            discover how to fine tune your thinking. Coaching is future oriented
            - less about sorting thru the past and definitely not therapy.
          </p>
          <a href="/#" class="btn btn-primary">
            Work with me
          </a>
        </div>
      </div>
    </div>

CSS:

.cardWrapper {
    text-align: center;
}

.card {
    display: inline-block;
    margin: 20px;
}