JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <img class="ratioDriver" src="http://dummyimage.com/200x100/000/fff.gif&text=2w:1h+Ratio" />
    <div id="header">Header<br />Header<br />Header<br />Header<br />Header<br />Header<br />Header<br />Header<br /></div>

    <div id="content">
        <div id="left">Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br /></div>
        <div id="right">Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br /></div>
	</div>

    <div id="footer">Footer<br />Footer<br />Footer<br />Footer<br />Footer<br />Footer<br />Footer<br />Footer<br />Footer<br />Footer<br />Footer<br />Footer<br /></div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
}

#wrapper{
    width: 100%; 
    max-width: 800px; 
    position: relative;
    margin: 0 auto;
}

.ratioDriver {
   width: 100%;   
   display: block; 
}

#header{
    background-color: red; 
    width: 100%; 
    height: 25%; /* 100 / 400 = .25 = 25% */
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
}
#left{
    position: absolute;
    top: 25%;
    left: 0;
    background-color: yellow; 
    width: 25%; /* 200 / 800 = .25 = 25% */
    height: 50%; /* 200 / 400 = .5 = 50% */
    overflow: auto;
}
#right{
    position: absolute;
    top: 25%;
    left: 25%;
    background-color: orange; 
    width: 75%; 
    height: 50%;
    overflow: auto;
}
#footer{
    position: absolute;
    top: 75%;
    left: 0;
    background-color: blue; 
    width: 100%; 
    height: 25%;
    overflow: auto;
}