JSFiddle - React, Tailwind, and code Playground

by merganser

HTML

<div id="header">
	<p><a href="http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks" title="Equal Height Columns with Cross-Browser CSS &amp; No Hacks">&laquo; Back to the equal height columns article</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a></p>
	<h1>Two Column CSS Demo of Equal Height Columns</h1>
	<h2>Full Cross-Browser CSS. No CSS Hacks. No Images. No JavaScript.</h2>
	<p>
		<a id="tab2" href="http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm" title="Two Equal Height Columns">2 Column</a> | 
		<a id="tab3" href="http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm" title="Three Equal Height Columns">3 Column</a> | 
		<a id="tab4" href="http://matthewjamestaylor.com/blog/equal-height-columns-4-column.htm" title="Four Equal Height Columns">4 Column</a> | 
		<a id="tab5" href="http://matthewjamestaylor.com/blog/equal-height-columns-5-column.htm" title="Five Equal Height Columns">5 Column</a>
	</p>
</div>
<div id="container2">
	<div id="container1">
		<div id="col1">
			<!-- Column one start -->
			<h2>Equal height columns</h2>
			<!-- Column one end -->
		</div>
		<div id="col2">
			<!-- Column two start -->
			<h2>Cross-Browser Compatible</h2>
			<!-- Column two end -->
		</div>
	</div>
</div>

CSS

/* <!-- */
body {
	margin:0;
	padding:0;
}
#header h1,
#header h2,
#header p {
	margin-left:2%;
	padding-right:2%;
}
#active2 #tab2,
#active3 #tab3,
#active4 #tab4,
#active5 #tab5 {
	font-weight:bold;
	text-decoration:none;
	color:#000;
}
#footer {
	clear:both;
	float:left;
	width:100%;
}
#footer p {
	margin-left:2%;
	padding-right:2%;
}

/* Start of Column CSS */
#container2 {
	clear:left;
	float:left;
	width:100%;
	overflow:hidden;
	background:#ffa7a7; /* column 2 background colour */
}
#container1 {
	float:left;
	width:100%;
	position:relative;
	right:50%;
	background:#fff689; /* column 1 background colour */
}
#col1 {
	float:left;
	width:46%;
	position:relative;
	left:52%;
	overflow:hidden;
}
#col2 {
	float:left;
	width:46%;
	position:relative;
	left:56%;
	overflow:hidden;
}
/* --> */