JSFiddle - React, Tailwind, and code Playground

by fred02138

HTML

<div id="wrapper">
    <div class="left">
    </div>
    <div class="middle">
    </div>
    <div class="right">
    </div>
</div>

CSS

html, body {height: 100%; width: 100%;}
#wrapper
{
    position: relative;
    height: 100%;
    width: 100%;
    font-size: 0;
    min-width: 600px;
    min-height: 400px;
}
    div
    {
        display: inline-block;
        height: 100%;
        position: relative;
        vertical-align: top;
        font-size: 12px;
    }

    .left
    {
        width: 30%;
        max-width: 400px;
        min-width: 200px;
        background-color: blue;
    }
    .middle
    {
        width: 30%;
        max-width: 400px;
        min-width: 200px;
        background-color: #88f;
    }
    .right
    {
        max-width: 100%;
        width: 40%;
        min-width: 200px;
        background-color: #99e;
    }
}