JSFiddle - React, Tailwind, and code Playground

by Khalil Zhang

HTML

<div id="header">
		<!-- header -->
	</div>

	<div id="content-body-wrapper">
		<div id="content-body">
			<div id="primary-nav">
				some navigation column here
			</div>
			<div id="secondary-nav">
				some additional column here
			</div>
			<div id="content">
				main content here
			</div>
		</div>
	</div>
	
	<div id="footer">
		<!-- footer -->
	</div>

CSS

#content-body-wrapper {
    display:table;
    border-collapse:collapse;
}
		
#content-body {
    display:table-row;
}
		
#primary-nav, #secondary-nav, #content {
    display:table-cell;
    border: 1px solid red;
}
		
#primary-nav, #secondary-nav {
    width:20%;
}
		
#content {
    width:60%;
}