JSFiddle - React, Tailwind, and code Playground
HTML
<nav>
<i></i>
<i></i>
<i></i>
</nav>
<main></main>
CSS
/* Code to Troubleshoot
// ----------------- */
body {
display: -webkit-flex;
display: flex;
}
nav {
-webkit-flex-basis: 160px;
flex-basis: 160px;
z-index: 2;
}
main {
-webkit-flex: 1;
flex: 1;
position: relative;
min-width: 1px;
max-width: 400px;
margin: 0 auto;
z-index: 1;
}
/* Presentational Styles
// ------------------ */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-weight: 300;
color: #bbb;
background-color: #eaeaea;
}
nav,
main {
height: 100vh;
background-color: #fff;
box-shadow: 0 0.15em 0.65em rgba(0, 0, 0, 0.15);
}
nav {
counter-reset: linkCount;
}
nav i {
display: block;
border-bottom: 1px solid #eaeaea;
padding: 0.925em 1em;
font-style: normal;
line-height: 1;
}
nav i:before {
counter-increment: linkCount;
content: "Link " counter(linkCount);
}
main:before {
content: "Main Content";
display: block;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}