JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <div class="container-fluid">
    <div class="row" id="headers">
        <div class="menu col-xs-3">
            <div class="column">
                <div class="col-xs-12 menu-item"><a id="about-me-nav">About Me</a></div>
                <div class="col-xs-12 menu-item"><a>Portfolio</a></div>
                <div class="col-xs-12 menu-item"><a href="./resume.html">Resume</a></div>
                <div class="col-xs-12 menu-item"><a>Contact</a></div>
            </div>
        </div>
        <div class="col-xs-9 main">
            <h1>Header</h1>
        </div>
        <div class="col-xs-9 content auto-content-div column">
        </div>

CSS

body, html {
    height: 100%;
    width: 100%;
}

#headers, .container-fluid {
   height: 100%;
   overflow: hidden;
}

.menu {
    background: url("http://www.space.com/images/i/000/041/737/original/milky-way-chile-praniski.jpg") no-repeat;
    height: 100%;
}

.main {
    background-color: #021615;
    text-align: center;
}

.menu-item:first-child {
    padding-top: 4.5em;
}

.menu-item {
    padding-top: 4em;
    text-align: center;
}

.content {
    height: 100%;
    background-color: rgba(12, 122, 86, 0.32) ;
}
.column {
    padding-bottom: 100%;
    margin-bottom: -100%;
}