Untitled

<div id="root">
   <div class="header"></div>
   <div class="body">
      <div class="text-left" id="text-one">
         <p>Some text taking up multiple lines</p>
      </div>
      <div class="text-right" id="text-two">
         <p>Other text</p>
      </div>
   </div>
</div>

<html><head><title>test</title></head><body>

<div id="root" style="border:1px solid red">
   <div class="header"></div>
   <div class="body">
      <div class="text-left" id="text-one" style="float: left;">
         <p>Some text taking up multiple lines</p>
      </div>
      <div class="text-right" id="text-two" style="float: right;">
         <p>Other text</p>
      </div>
   </div>
</div></body>

var height = Math.max(leftHeight, rightHeight);

var max_height = 0;
$.each( $('#root div'), function(x, y){
    var yHeight = $(y).height();
    max_height = ( yHeight > max_height) ? yHeight : max_height;
});
console.log(max_height); //should have the height value.

$('#root .body').addClass('clearfix');

$('#root').height();

<div id="root">
   <div class="header"></div>
   <div class="body">
      <div class="text-left" id="text-one">
         <p>Some text taking up multiple lines</p>
      </div>
      <div class="text-right" id="text-two">
         <p>Other text</p>
      </div>
   </div>
   <div style="clear: both;"></div>
</div>

#root {
  background-color: lightgreen; /* for demo purposes */
  overflow: hidden;
}

$('#root').css( 'overflow', 'hidden' );
// ...then your height code