JSFiddle - React, Tailwind, and code Playground

by Don Johnson

HTML

<div class="grid">
	<div class="grid-left"><span class="box">Major Events</span></div>
	<div class="grid-center">
		<div class="box box50"><span>Tours & Maps</span></div>
		<div class="box box50"><span>Visiting Information</span></div>
		<div class="box footer"><span>Video</span></div>
	</div> 
	<div class="grid-right"><span class="box">Discovery Centers</span></div>
</div><!-- /.grid -->

CSS

.grid {
	width:960px;
	margin:auto;
	height:350px; 
}
.grid-left,
.grid-center,
.grid-right {
	display: inline-block;
	float:left;
	width:25%;
	height:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border:solid 1px #d0d0d0;
}
.grid-center {
	width:50%;
}
.box {
	text-align: center;
	padding:20px;
	display: block;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.box50 {
	width:50%;
	float: left;
}
.grid-center .box {
	height:175px;
}
.footer {
	clear:both;
	border-top:#ddd solid 1px;
}