Bootstrap 4: How to have cards in a row with different height? - html

Question

I'm trying to set up two cards adjacent to one another in a single row, but I'm having an issue where the shorter length card always resizes itself automatically to match the longer one. When resizing the page, the cards are no longer adjacent and collapse onto separate rows and at that point they are independent sizes- I'd like them to be independent sizes in any case. They appear as independent sizes when I manually set the height of both of them, but the content in the cards will be dynamic so I want to avoid that. How would I go about doing 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>blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah</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)
https://jsfiddle.net/fu7q6jca/

Answer 1

The .row is designed to contain col-, not card. Put the cards inside col-*...
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card mb-4 ml-2 mr-2 text-left">
<div class="card-body">
<p>blahblahblah</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4 ml-2 mr-2 text-left">
<div class="card-body">
<p>blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah</p>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/xDnbMaM6Dm