Is there a way to set up two cards next to each other in a row without one resizing to match the other? Whenever I resize the page, the cards no longer stay adjacent and collapse onto separate rows with different sizes. Manually setting the height works, but since the content will be dynamic, that's not ideal. Any suggestions on how to achieve this?
<div class="row justify-content-center">
<div class="card mb-4 ml-2 mr-2 text-left">
<div class="card-body">
<p>blahblahblah</p>
</div>
</div>
<div class="card mb-4 ml-2 mr-2 text-left">
<div class="card-body">
<p>blahblahblahblahblahblah (long content) </p>
</div>
</div>
</div>
CSS:
.card {
width: 36rem;
}
How they look (without forced height)
How I want them to look (this is by manually styling their height, which I want to avoid)
How they look when shrinking the page (this is fine, just for reference)