title: Bootstrap4 - how to make cards within nested row stretch to match next row?
body: <p>Trying to wrap some cards into a rather complex layout. The elements on the right side, namely the cards.</p>
  
  <p>What I have so far
  <a href="https://jsfiddle.net/shifterofbits/ojgtmn80/5/" rel="nofollow noreferrer">https://jsfiddle.net/shifterofbits/ojgtmn80/5/</a></p>
  
  <p>In the screenshot mockup and fiddle, the "box 2 and box 3" components look like this</p>
  
  <pre><code> &lt;div class="col-md-8 mb-3"&gt;
        &lt;div class="row"&gt;
          &lt;div class="card"  style="height:235px"&gt;
              &lt;div class="card-header"&gt;
                  box 2
              &lt;/div&gt;          
            &lt;div class="card-body"&gt;
              &lt;h3 class="card-title"&gt;Title 2&lt;/h3&gt;
              &lt;p class="card-text"&gt;With supporting text below as a natural lead-in to additional content.
              With supporting text below as a natural lead-in to additional content.
              &lt;/p&gt;
              &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
          &lt;div class="card"  style="height:235px"&gt;
              &lt;div class="card-header"&gt;
                  box 3
              &lt;/div&gt;          
            &lt;div class="card-body"&gt;
              &lt;h3 class="card-title"&gt;Title here&lt;/h3&gt;
              &lt;p class="card-text"&gt;With supporting text below as a natural lead-in to additional content.
              With supporting text below as a natural lead-in to additional content.
              &lt;/p&gt;
              &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;      
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/WnqIg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WnqIg.png" alt="enter image description here"></a></p>
  
  <p>Here is a mockup of the type of layout im trying to get to.
  Notice the right side, everything is aligned.
  <a href="https://i.stack.imgur.com/OTa9E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OTa9E.png" alt="enter image description here"></a></p>