JSFiddle - React, Tailwind, and code Playground

by Tristan Rentz

HTML

<div class="colmask threecol">
	<div class="colmid">
		<div class="colleft">
			<div class="col1">
				Center
			</div>
			<div class="col2">
				Left
			</div>
			<div class="col3">
				Right
			</div>
		</div>
	</div>
</div>

CSS

.colmask {
	position:relative;	
	clear:both;
	float:left;
	width:100%;			
	overflow:hidden;	
    height:100%;
}

.colright,
.colmid,
.colleft {
	float:left;
	width:100%;	
  height:100%;
	position:relative;
}
.col1,
.col2,
.col3 {
	float:left;
	position:relative;
	padding:0 0 1em 0;	
	overflow:hidden;
  height:100%;
}


.threecol {
	background:#eee;	
}

.threecol .colmid {
	right:20%;			
	background:#aaa;	
}

.threecol .colleft {
	right:60%;			
	background:#f4f4f4;	
}

.threecol .col1 {
	width:56%;			
	left:102%;			
}

.threecol .col2 {
	width:16%;			
	left:26%;			
}

.threecol .col3 {
	width:16%;			
	left:90%;			
}