title: Child elements same height in css
body: <p>So basically I want the title, description and cta same height as the others regardless of the content using css flex/grid.</p>
  <p>The output should be like this.
  <a href="https://i.stack.imgur.com/ULPBp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ULPBp.png" alt="enter image description here" /></a></p>
  <p>I'm using bootstrap 4.0. You can add your own additional css.</p>
  <p>Below is my code and also here is the <a href="https://codepen.io/graydirt/pen/poLaGrE" rel="nofollow noreferrer">codepen</a>. Feel free to fork it.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url("https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css");</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
        &lt;div class="row justify-content-center"&gt;
           &lt;div class="col-md-6 col-lg-4 my-3"&gt;
              &lt;div class="pb-3"&gt;&lt;img class="img-fluid w-100" src="https://via.placeholder.com/380x235.png?text=Placeholder"&gt;&lt;/div&gt;
              &lt;div class="pb-3 bg-primary"&gt;
                 &lt;h2&gt;Lorem Ipsum&lt;/h2&gt;
              &lt;/div&gt;            
              &lt;div class="pb-3 bg-secondary"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry.&lt;/div&gt;
              &lt;p class="bg-warning"&gt;&lt;button type="button" class="btn btn-primary"&gt;Primary&lt;/button&gt;&lt;/p&gt;
           &lt;/div&gt;
           &lt;div class="col-md-6 col-lg-4 my-3"&gt;
              &lt;div class="pb-3"&gt;&lt;img class="img-fluid w-100" src="https://via.placeholder.com/380x235.png?text=Placeholder"&gt;&lt;/div&gt;
              &lt;div class="pb-3 bg-primary"&gt;
                 &lt;h2&gt;Lorem Ipsum is simply dummy text&lt;/h2&gt;
              &lt;/div&gt;            
              &lt;div class="pb-3 bg-secondary"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,&lt;/div&gt;
              &lt;p class="bg-warning"&gt;&lt;button type="button" class="btn btn-primary"&gt;Primary&lt;/button&gt;&lt;/p&gt;
           &lt;/div&gt;
        &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>