title: Equal height of columns in Bootstrap 4
body: <p>I have a little non-conventional DIV in this design as shown below. I could use a height and do it but I want it to change dynamically:
  <a href="https://i.stack.imgur.com/KByqK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KByqK.png" alt="enter image description here"></a>
  For instance, if the DIV has more content and the height changes in one of the block on the right, the left DIV auto adjust it's height as well. I wonder if flex could help. Here's how it should change to:
  <a href="https://i.stack.imgur.com/9dWby.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9dWby.png" alt="enter image description here"></a></p>
  
  <p>I have this HTML so far:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row row-eq-height"&gt;
        &lt;div class="col-sm-8 col-8"&gt;
          &lt;div class="black"&gt;
            &lt;p&gt;Bar Graph or Line Graph&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-4 col-4"&gt;
          &lt;div class="red"&gt;
            &lt;p&gt;numbers&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="purple"&gt;
            &lt;p&gt;numbers&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="green"&gt;
            &lt;p&gt;numbers&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="blue"&gt;
            &lt;p&gt;numbers&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>p { color: #fff; }
  .black { background-color: black; }
  .green { background-color: green; }
  .red { background-color: red; }
  .blue { background-color: blue; }
  .purple { background-color: purple; }
  </code></pre>
  
  <p><strong><a href="https://jsfiddle.net/ar0m0p3a/" rel="noreferrer">JSFiddle Demo</a></strong></p>