I have two Bootstrap cards and I want to ensure they maintain the same height, but the content 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>
The issue is that the content inside .card-body is causing the card borders to extend unevenly. Adding extra padding didn't resolve the problem. How can I ensure both cards have the same height while keeping the content aligned?
I also attempted using .d-flex .align-items-stretch, however, the content in .card-body became misaligned.
https://codepen.io/motorocool/pen/BadaWee
Edit: I am aiming for a similar outcome like this. https://i.sstatic.net/lloYA.jpg