JSFiddle - React, Tailwind, and code Playground

HTML

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3"><p>Navigation goes here</p></div>
        <div class="col-md-9"><p>Content goes here</p></div>
    </div>
</div>

CSS

*
{
    margin:0;padding:0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html,body
{
    height:100%;
}
.container
{
    position: relative;
    display:block;
    width: 100%;
    height:100%;
}
header
{
    background: green;
    height: 50px;
    padding: 15px 3.15% 0;
}

.row
{
    overflow: hidden;
    height: 100%;
}
.row .col-md-3,
.row .col-md-9 
{
	padding: 30px 3.15% 99999px; 
	float: left;
	margin-bottom: -99999px;
}
.row .col-md-3 p,
.row .col-md-9 p 
{
    margin-bottom: 30px;
}
.col-md-3
{
    background: pink;
    left:0;
    width:25%
}
.col-md-9
{
    width: 75%;
    background: yellow;
}