JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<div class="header"></div>
<div class="content">
    <div class="side">
        <a href="#"> menu</a>
        <a href="#"> menu</a>
        <a href="#"> menu</a>
        <a href="#"> menu</a>
        <a href="#"> menu</a>
    </div>
    <div class="body"></div>
</div>

CSS

.header {
        background-color: #111;
        width:100%;
        height:120px;
    }

    .content { display:table; width:100%; }

    .side, .body {
        display:table-cell;
        height:1000px;
        vertical-align: top;        
    }
    .side {
        width:20%;
        background-color: #777;
        padding:20px;
    }
    .side a {
        /* just as an aside, you REALLY don't need those <br/> tags... 
           just make your a tags inside your .side into block elements */
        display:block;
    }
    .body {
        width:80%;
        background-color: #d33;
    }