JSFiddle - React, Tailwind, and code Playground

by jack_pallot

HTML

<div id="container"> <!--- website wrapper -->
    <div id="menu" class="unit">
        MENU
    </div>
    <div id="content_wrapper" class="unit"> <!--- wraps the content boxes -->
        <div class="content">
            BANNER
            </div>
         <div class="content">
            TITLE
            </div>
        <div class="content">
            CONTENT
        </div>
    </div>
    <div id="footer" class="unit">
    FOOTER
</div>
</div> <!--- closes container --->

CSS

#container {
    width: 500px; /* main container width */
    margin: 0 auto;
    border: 3px solid black;
}

.unit {
    display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
    margin-right: -4px;
}

#menu {
    width: 100px; /* menu width */
    background: green;
}

#content_wrapper {
    width: 400px; /* width of the content area */
}

.content {
    width: 100%;
    height: 100px; /* just for demo purposes */
    background: blue;
}

#footer {
    width: 100%;
    background: red;
}

JavaScript

$(document).ready( function(){
  var leftHeight = $("#menu").height();
  var rightHeight = $("#content_wrapper").height();
  if (leftHeight > rightHeight){ $("#content_wrapper").height(leftHeight)}
  else{ $("#menu").height(rightHeight)};
})