JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="row">
    <div id="nav">
        <ul>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </div>
    <div id="main" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h1>Header</h1>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
    </div>
</div>

CSS

*{box-sizing: border-box}
.row {position: relative}
#nav {
    position: absolute;
    left: 0;
    background: transparent;
    z-index: 1;
    width: 16.67vw;
    overflow: hidden;
    margin-right: 0;
}

#main {
    background-color: yellow;
    border-left: 16.67vw solid green;
}