JSFiddle - React, Tailwind, and code Playground

by apasaja

HTML

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>JS Bin</title>
    </head>

    <body>
        <div id="left" class="column">
            <div class="top-left">Top Left</div>
            <div class="bottom">
                <p>one</p>
                <p>two</p>
                <p>three</p>
                <p>four</p>
                <p>five</p>
                <p>six</p>
                <p>seven</p>
                <p>eight</p>
                <p>nine</p>
                <p>ten</p>
                <p>eleven</p>
                <p>twelve</p>
                <p>thirteen</p>
                <p>fourteen</p>
                <p>fifteen</p>
                <p>sixteen</p>
                <p>seventeen</p>
                <p>eighteen</p>
                <p>nineteen</p>
                <p>twenty</p>
                <p>twenty-one</p>
                <p>twenty-two</p>
                <p>twenty-three</p>
                <p>twenty-four</p>
                <p>twenty-five</p>
                <p>twenty-six</p>
                <p>twenty-seven</p>
                <p>twenty-eight</p>
                <p>twenty-nine</p>
                <p>thirty</p>
            </div>
        </div>
        <div id="right" class="column">
            <div class="top-right">
                <ul>
                    <li>one</li>
                    <li>two</li>
                    <li>three</li>
                    <li>four</li>
                </ul>
            </div>
            <div class="bottom">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam massa, ornare at turpis quis, varius pulvinar lorem. Morbi eleifend nisi eget viverra fermentum. Vivamus interdum dui quis orci placerat semper. Morbi lobortis ex sit amet
                    risus cursus pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam luctus leo augue, non facilisis nunc aliquam sed....

CSS

html {
    height: 100%;
    font-family: sans-serif;
}

body {
    height: 100%;
    overflow: hidden;
    margin: 0px;
    display: flex;
}

.column {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#left {
    flex-shrink: 0;
    background-color: white;
}

#right {
    background-color: #f3f3f3;
}

.top-left {
    flex-shrink: 0;
    background-color: #333;
    color: white;
    padding: 20px;
}

.top-right {
    display: inline-flex;
    flex-shrink: 0;
    background-color: #333;
    color: white;
    padding: 20px;
}

.bottom {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
}

ul {
    display: inline-flex;
    list-style: none;
    margin: 0;
}

li {
    margin-right: 20px;
}