JSFiddle - React, Tailwind, and code Playground

by Andy Blueman

HTML

<div id=sections>
	<div id=sectionone >
	<section id="S1L"><div><H4>S1L</H4> Blah blah</div></section>
	<section id="S1R"><div><H4>S1R</H4></div></section>
	</div>

	<div id=sectiontwo class="dropdown">
	<section id="S2L"><div><H4>Section One Left</H4>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere, enim non gravida sagittis, libero nulla congue nibh, ac rutrum est nisl ac justo. Ut ligula elit, rhoncus in libero quis, posuere elementum mauris. Ut bibendum orci quis tellus efficitur luctus. Nunc ultrices congue libero, et tincidunt erat placerat ut. Proin vitae velit scelerisque, laoreet ipsum ut, eleifend nunc. Cras aliquet aliquam dignissim. Mauris accumsan, lacus vel tincidunt convallis, dolor lacus varius nibh, eu ornare quam augue dignissim eros. Nunc malesuada magna in est viverra, id malesuada erat imperdiet. Curabitur vulputate nunc eget condimentum scelerisque. Maecenas id nibh accumsan, viverra lorem a, accumsan turpis. Donec condimentum sit amet lacus luctus bibendum.</p>
<p>
Fusce ultrices nulla dignissim turpis rutrum sollicitudin. In facilisis elit at lorem hendrerit, non tempus turpis facilisis. Nullam gravida magna turpis, et semper nunc hendrerit vel. Nam eget leo at libero tristique tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque porttitor commodo elit, sed condimentum leo lobortis et. Maecenas sed mi augue. Cras convallis porta lacus eu faucibus. Maecenas porttitor dignissim libero, bibendum hendrerit odio gravida ut. Vivamus elit mauris, eleifend ut sagittis eu, dictum sed metus.</p>
</div></section>
<section id="S2R"><div><H4>Section One Right</H4>Blah blah <BR /><BR />LOL</div></section>

    </div>

CSS

#sections { 	
	display: inline-block;
	vertical-align: top; 		
	}
	#S1L div, #S1R div ,#S2L div, #S2R div { 
		padding: 5px 10px 10px 10px;
		}

#sectionone {}

	#S1L	{
		border: 1px solid green;
		margin: 0 auto;
		}

	#S1R	{
		border: 1px solid blue;
		margin: 0 auto;
		}
		#GOOGLE {

			display: table;
			margin: 0 auto;
		}

#sectiontwo {}

	#S2L 	{
		border: 1px solid red;
		margin: 0 auto;
		}

	#S2R	{
		border: 1px solid brown;
		}

section {
	padding: 0px 0px 0px 0px ; 
	width:300px;	
	display:inline-block;
	vertical-align: top;
	}

JavaScript

var S1L = $("#S1L").height(); 
var S1R = $("#S1R").height();
var S2L = $("#S2L").height();
var S2R = $("#S2R").height(); 

document.getElementById("S1L").innerHTML = S1L;
document.getElementById("S1R").innerHTML = S1R;
document.getElementById("S2L").innerHTML = S2L;
document.getElementById("S2R").innerHTML = S2R;

if(S1L <= S1R)
{ $('#S1L').css('height', S1R); } else { $('#S1R').css('height', S1L); }

if(S2L < S2R)
{ $('#S2L').css('height', S2R); } else { $('#S2R').css('height', S2L); }