JSFiddle - React, Tailwind, and code Playground

by Adam Granger

HTML

<div class="wrapper">
    <div id="row1">Header</div>
    <div id="row2">
        <div id="col1">
            <div id="map-container">
                <div id="map">Map</div>
                <div id="controls">Controls</div>
            </div>
        </div>
        <div id="col2">Sidebar</div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html, body, .wrapper {
    height:100%;
    width: 100%;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
#row1 {
    flex: 0 1 auto;
    background-color: red;
}
#row2 {
    flex: 2 0 auto;
    display: flex;
}
#col1 {
    flex: 1 0 auto;
    display: flex;
    background-color: green;
}
#col2 {
    flex: 0 0 240px;
    background-color: blue;
}
#map-container {
    flex: 1 0 auto;
    display: flex;
    position: relative;
    background-color: yellow;
}
#map {
    flex: 1 0 auto;
    background-color: purple;
}
#controls {
    background-color: orange;
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 100px;
    height: 20px;
}