JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<!-- This is background of main content -->
<div class="same-height-wrap-full">
    <!-- This is backgroun of aside content -->
    <div class="same-height-menu-column">
        <!-- Viewport for columns -->
        <div class="same-height-wrap-inner">
            <!-- Menu column -->
            <div class="menu-column">
                <nav>
                    <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="">About</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <!-- Content column -->
            <div class="content-column">
                <h1>Content</h1>
            </div>
        </div>
    </div>
</div>

CSS

.same-height-wrap-full, 
.same-height-wrap-inner{
    width: 500px;
}
.same-height-wrap-inner:before,
.same-height-wrap-inner:after {
    content:"";
    display:table;
}

.same-height-wrap-inner:after {
    clear:both;
}
.same-height-wrap-inner {
    *zoom:1;
}

.same-height-wrap-full{
    margin: 10% auto;
    background: #EEE;
}
.same-height-menu-column, 
.menu-column{
    width: 150px;
}
.same-height-menu-column{
    background: #DDD;
}
.menu-column{
    float: left;
}
.content-column{
    float: right;
    width: 350px;
}