JSFiddle - React, Tailwind, and code Playground

by abhitalks

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;
}