JSFiddle - React, Tailwind, and code Playground

by Carl Blakemore

HTML

<div id="outer">
    <div id="top">
        top
    </div>
    <div id="bottom">
        <div id="left">
            bottom left
        </div>
        <div id="right">
            bottom right
        </div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;   
}
    
html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#outer {
    border: 5px solid red;
    display: flex;
    display: -webkit-flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    -webkit-flex-direction: column;
}

#top {
    width: 100%;
    border: 5px solid blue;
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
}

#bottom {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    height: 100%;
    border: 5px solid green;
    align-items: flex-end;
    -webkit-align-items: flex-end;
}

#left {
    border: 5px solid purple;
    padding: .5em;
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
}

#right {
    border: 5px solid cyan;
    padding: .5em;
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
}