Bootstrap 5 Card how to make the fields within the card the same height regardless of the content?

Question

in fig-1 fig-1, I wanted to leave this brown({x.title}) content with the same height, the blue({x.description}) and green({x.description2}) content as well, aligning them on the card with the same height regardless of the size of the content inside (fig-1) i'm using bootstrap 5.

function CardResponsive() {
 
  return (
  <div className="container">
    <div className="scroll mt-4">
      <div className="row row-cols-1 row-cols-md-3 g-4">
        
        {a.map((x) => {
          return (
            <div key={x.id} className="col">
              <div className="card h-100">
                <img src={x.screenShot} className="card-img-top" alt="..."/>
                <div className="card-body">
                  <h5 className="card-title">{x.title}</h5>
                  <p className="card-text a">{x.description}</p>
                  <p className="card-text b">{x.description2}</p>
                </div>
                <div className="card-footer">
                  <small className="text-body-secondary">Last updated 3 mins ago</small>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  </div>
  )
}
 
export default CardResponsive

I can do only if i set the height to a fixed value in the CSS , but then it would not be responsive (fig-2): fig-2

.card-title {
  background-color: #C09578;
  height: 80px;
}
.a {
  background-color: cadetblue;
  height: 130px;
}
.b {
  background-color: rgb(135, 202, 141);
  height: 275px;
}

I'm trying to make the content within the card the same height regardless of the size of the content, but in a responsive way.