title: Bootstrap 4: How to have cards in a row with different height?
body: <p>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?</p>
  
  <pre><code>  &lt;div class="row justify-content-center"&gt;
      &lt;div class="card mb-4 ml-2 mr-2 text-left"&gt;
        &lt;div class="card-body"&gt;
          &lt;p&gt;blahblahblah&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card mb-4 ml-2 mr-2 text-left"&gt;
        &lt;div class="card-body"&gt;
          &lt;p&gt;blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  CSS:
  .card {
  width: 36rem;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/eCUtf.png" rel="nofollow noreferrer">How they look (without forced height)</a></p>
  
  <p><a href="https://i.stack.imgur.com/DR0FA.png" rel="nofollow noreferrer">How I want them to look (this is by manually styling their height, which I want to avoid)</a></p>
  
  <p><a href="https://i.stack.imgur.com/gGEls.png" rel="nofollow noreferrer">How they look when shrinking the page (this is fine, just for reference)</a></p>
  
  <p><a href="https://jsfiddle.net/fu7q6jca/" rel="nofollow noreferrer">https://jsfiddle.net/fu7q6jca/</a></p>