JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<div id="content">
	<div>
		<div id="header">
        </div> <!-- #header -->
	</div>
	<div>
		<div id="left" class="ui-accordion ui-widget ui-helper-reset">
    <h3>Label 1</h3>
    <div>Aspit adis qui consequatur, eaquam cusci uta comnihi lloraes totatis nonsequi si tem rectur, consequi ate es cum, odigendel iderum nis alitinusa dipidusantis at fuga. Itati ut et quiant veliquiatia cus vid mos est, sandipis mod molla sunt delene et harci omnis acero velit estrum qui auditin nobitiiscil et quae nonet estia nobitia corro doluptiatur sam il id quunt utemper rorporrum serci coriore dolore volore pres eum arcit, nemporeperum nissi voluptas net et aute pre aut idus elitat ad quatur? Qui senis nis estia sae. Igenima vendis eicipsunt as voluptatius nost repe aliquatust utat laborume dignam rest et la comnis solorer oresed et laceaque acearibus.</div>
    <h3>Label 2</h3>
    <div>Entemporerio odit vollacc ullabo. Ditia dolorum re nimusdaest, ipsunt quibus, sum quia dolut audis modi volore nonsequat lam fugiam, simet, suntur sin reped millaute coreria tempostem audia nosam explibust, utem fugiatemodis etur as simi, sequiam doloreriatem quatendi beribus ipsandi gendit qui il et aut voluptaquia si odi ne plic tem labo. Ceptate autet ipsunto eturias peraturis ent asperum qui optat que ratem ut hariasp erunt.
Ic tem inction pel magnis et fugitibere nullessunt aut exera qui omnis etur sitaquiatis ex et aut quossiminus erume nectus soles sumquod igendae re volupissit re, te consequo verrum eum quame sunt etur?</div>
    <h3>Label 3</h3>
    <div>Sequam fugit dolupta volorera consequia dolorpo rernam qui dolende corro optat velest mint laborib uscipidit qui as sereribus eventio exceraturi simporro doluptate si ommodis et porum aliciet ut recus audipsum iuntemperum nis...

CSS

body, div {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

html, body, #content {
	width: 100%;
	height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

#content {
	display: table;
	border: 1px solid black;
}

#content > div {
	display: table-row;
}

#content > :first-child,#header {
	height: 48px;
}

#content > :last-child,#footer {
	height: 25px;
}

#header, #footer {
	width: 100%;
    background:gray;
}

#left,#right {
	height: 100%;
    overflow: hidden;
    display:inline-block;
}

#left {
	width: 35%;
	border-right: 1px solid black;
    background: lightpink;
}

#right {
	width: 65%;
    background: lightgreen;
}

JavaScript

var a = $("#left");
a.accordion( { collapsible: true, heightStyle: "fill" } );
$(window).resize( function() {
    var h = a.height();
    a.find(".ui-accordion-header").each(function() {
        var e = $(this);
        if(e.css("display") != "none")
            h -= e.outerHeight(true);
    });
    a.find(".ui-accordion-content").css("height", h);
});
$(window).resize();