title: How to make div inside bootstrap column all have the same height?
body: <p>Let's say I have this structure:</p>
  
  <pre><code>&lt;div className="row"&gt;
      &lt;div class="col-sm"&gt;
        &lt;div&gt;TEST&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-sm"&gt;
        &lt;div&gt;TEST&lt;br&gt;TEST&lt;br&gt;TEST&lt;/div&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Basically, I know how to make the columns of the same height (using the <code>.equal</code> class on the row) however, what I need is the child div of the column to also be of the same height. Currently, if one of the child divs is shorter, it won't look aligned because I set the background color to be in the child div and not on the <code>col-sm</code> div.</p>
  
  <p>I cannot set the background on <code>col-sm</code> for flexibility reasons. E.g. I may need to use that child div component in another section that doesn't use <code>'col-sm'</code>.</p>
  
  <p>Mine currently is the one on top, I want it to become the one at the bottom:</p>
  
  <p><a href="https://i.stack.imgur.com/NPEmy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NPEmy.png" alt="enter image description here"></a></p>