JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
			<div class="topmenu clear">
               
			</div>
			<div class="header">
				<h3>Lorem ipsum dolor</h3>
			</div>
				<div class="leftside">
					<div class="block">
						Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sincidunt ut labore et dolore magnam aliquam quaerat voluptatem.
					</div>
				</div>
				<div class="mainside">
					<div class="block">
						Mauris fringilla mauris semper dolor euismod fringilla. Aliquam nec lorem non nulla tempor cursus sit amet sit amet mauris. Curabitur sollicitudin velit a odio commodo vehicula. Nulla sodales, ipsum in tristique sollicitudin, nulla nibh condimentum mi, et ultricies lacus turpis molestie elit. Mauris non augue vitae leo vulputate gravida.
                    </div>
				</div>
		
			<div class="footer-push"></div>
		</div>		
		<div class="footer">
			Donec eu leo nisl.
		</div>

CSS

* {
	vertical-align: baseline;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: none;
	padding: 0;
	margin: 0;
}

html, body {
	height: 100%;
	font-family: sans-serif;
	font-size: 90%;
	color: #333;
}

h3{
	font-size: 200%;
	font-weight: bold;
}

body > .wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -7em;
	background-color: #ededf5;
}

.header{
	padding-top: 1em;
	height: 9em;
	background-color: #dfe2eb;
}

.header h3{
	padding-left: 1em;
}

.leftside {
    width: 25em;
    float: left;
	overflow: hidden;
	padding: 2em 0 2em 0;
}

.mainside {
	margin-left: 25em;
	padding: 2em;
}

.footer-push,
.footer {
	height: 7em;
	clear: both;
}

.footer{
	overflow: hidden;
	color: #fff;
	background-color: #45464c;
}

.block + .block{
	margin-top: 2em;
}

.block{
	padding: 1.5em;
	background-color: #f6f6fc;
}

.clear:after {
	content: " ";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clear {
	display: inline-block;
}

* html .clear { 
	height: 1%;
}

.clear {
	display: block;
}