title: How to make rows of equal height with uneven div content in Javascript?
body: <p><a href="https://i.stack.imgur.com/wp3Uy.png" rel="nofollow noreferrer">Working example</a></p>
  
  <p>NOTE: I have the JQuery code below that worked for me, but I have to use Javascript.
  I have a table where there are two columns.
  Each row of the columns has to be the same height, but each row does not contain the exact same amount of content.
  The container class "row" has 3 divs in the first column and 2 divs in the second column.</p>
  
  <p>Here is my HTML</p>
  
  <pre><code>        &lt;div class="table"&gt;
              &lt;div class="column"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="value-label"&gt;TEXT1&lt;/div&gt;
                      &lt;div class="compare-label"&gt;TEXT2&lt;/div&gt;
                      &lt;div class="comment-label"&gt;TEXT3&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="column"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="value-label"&gt;TEXT1&lt;/div&gt;
                      &lt;div class="compare-label"&gt;TEXT2&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I had the height of the rows being the same working with the following JQuery function:</p>
  
  <pre><code>                    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
                      &lt;script&gt;
                          jQuery(document).ready(function($) { 
                              var heights = $(".row").map(function() {
                                  return $(this).height();
                              }).get(),
                              maxHeight = Math.max.apply(null, heights);
                              $(".row").height(maxHeight);
                              });
                      &lt;/script&gt;
  </code></pre>
  
  <p>My issue is that my company does not allow the use of JQuery and I'm having a lot of problems trying to accomplish the same thing in Javascript.
  I need the height of the row in each column to be the same, no matter the amount of divs inside of the row, but in Javascript.</p>
  
  <p>UPDATE: Forgot to add that, in some situations, the 3 div column will revert to a 2 div column. So the heights need to change based on how many divs are showing. This is just an example with one row. I have 5 rows that do this across two columns.</p>