title: How can I get the child divs to match the height of the parent?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-md-6 about-info js-matchheight" data-wow-offset="10"&gt;
          &lt;div class="border"&gt;
            &lt;h3&gt;About Me&lt;/h3&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.&lt;/p&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.&lt;/p&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 col-md-6 about-container js-matchheight noPadding" data-wow-offset="10"&gt;
          &lt;div class="container-fluid"&gt;
            &lt;div class="row align-items-center"&gt;
              &lt;div class="col-xs-12 col-md-6 block"&gt;
                &lt;h4&gt;Weddings&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-md-6 block"&gt;
                &lt;h4&gt;Studio&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-md-6 block"&gt;
                &lt;h4&gt;Nature&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-md-6 block"&gt;
                &lt;h4&gt;Events&lt;/h4&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I need help achieving a layout like this:</p>
  <p>Desired layout</p>
  <p><a href="https://i.stack.imgur.com/Jw4sf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jw4sf.png" alt="enter image description here" /></a></p>
  <p>I'm having trouble getting the child divs on the right to match the height of the parent.  Any help would be much appreciated.</p>