JSFiddle - React, Tailwind, and code Playground

by Sumner Evans

HTML

<div class="container">
    <div class="left">
        <div class="top">My content</div>
        <div class="bottom">My content is very long in this section.
            <ul>
                <li>Foo</li>
                <li>Bar</li>
                <li>Baz</li>
                <li>Foo</li>
                <li>Bar</li>
                <li>Baz</li>
                <li>Foo</li>
                <li>Bar</li>
                <li>Baz</li>
            </ul>
        </div>
    </div>
    <div class="right">
        <p>This is the content on the right</p>
        <p>My content is very long in this section.</p>
        <ul>
            <li>Foo</li>
            <li>Bar</li>
            <li>Baz</li>
            <li>Foo</li>
            <li>Bar</li>
            <li>Baz</li>
            <li>Foo</li>
            <li>Bar</li>
            <li>Baz</li>
        </ul>
        <p>This div defines the height of the entire container class.</p>
        <p>Lacus felis. Donec velit. Purus metus. Massa magna interdum vestibulum hymenaeos ipsum penatibus luctus a interdum sit orci. Vitae augue. Felis donec. Porta augue. Metus risus pulvinar vestibulum consequat etiam leo eros ac. Class massa laoreet nunc tristique auctor mollis. Curae proin. Morbi metus iaculis dictumst.</p>
    </div>
</div>

CSS

.container {
    width: 100%;
    position: absolute;
}
.container .left {
    width: 300px;
    float: left;
    border: 1px solid red;
    height: 100%;
    position: absolute;
    display: flex;
    flex-flow: column;
}
.container .left .top {
    height: 100px;
    border: 2px solid black;
    flex: 0 1 auto;
}
.container .left .bottom {
    border: 2px solid blue;
    flex: 1 1 auto;
}
.container .right {
    margin-left: 300px;
    border: 1px solid green;
    height: 100%;
}