Keep the same height in content within a card bootstrap

I have two Bootstrap cards and i want to keep the same height, but the description inside .card-body

<div class="col-md-6">
    <div class="card">
        <img class="card-img-top" data-src="holder.js/100px180/" >
        <div class="card-body">
            <p class="card-text">Cost $100</p>
            <p class="card-text">Description: Beautiful item Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus </p>
            <button class="btn btn-danger">Buy</button>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card">
          <img class="card-img-top" data-src="holder.js/100px180/" >
          <div class="card-body">
              <p class="card-text">Cost $100</p>
              <p class="card-text">Description: Beautiful item Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus aspernatur sed alias reiciendis deleniti amet doloribus, adipisci aut, veniam asperiores ipsam nemo vel eius. Tenetur a eius vel impedit officia?</p>
            <button class="btn btn-danger">Buy</button>
        </div>
    </div>
</div>

is pushing down the border of my .card, I added some extra padding in the description but it keeps pushing down all my content down. How I can keep the same height in cards keeping my card content in the same height too?

Also i tried adding .d-flex .align-items-stretch but the content inside .card-body are misaligned

https://codepen.io/motorocool/pen/BadaWee

Edit: I would like to have the same result like this. https://imgur.com/a/Cj9vw6Q