Changing heights of multiple divs dynamically depending on div with more content [duplicate]

Question

I have a section, inside two sections. Either one of these subsections could determine the size of the other.

And I've drawn up a quick codepen here: http://codepen.io/anon/pen/QyZbev

.outersection {
  width: 100%;
  overflow: scroll;
  height: 100vh;
}

.group-section {
  display: block;
  border: blue 1px solid;
  padding: 5px 0;
  height: 100%;
}

.code, .documentation {
  width: 50%;
  display: inline-block;
  border: 1px solid green;
  height: 100%;
  overflow: auto;
}

I tried this with JQuery and CSS only, but there will be more than 2 of these sections, each needing different heights. Neither attempt worked and I'm not convinced the JQuery way is dynamic enough for all sections.

The issue is that both sides don't end up matching heights and then the sides seem to be floating everywhere. They don't fill the encasing section and the divs seem to switch sides that they float on.

Thanks in advance!

Answer 1

I added an auto-height class to all elements that needed to be equal height. Then I wrote a little jQuery function that calculates which element is the largest and sets all of them to that height.

function thisHeight(){
    return $(this).height();
}
$('.group-section').each(function(){
    var height = Math.max.apply(Math, $(this).find('.auto-height').map(thisHeight));
    $(this).find('.auto-height').height(height);
});

Here's a pen.