JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="container1">
        <div id="content1">
        </div>   
    </div>
    <div id="container3">
        <div id="content3">
        </div>
    </div>
</div>
<div id="container2">
    <div id="content2">
    </div>                      
</div>

CSS

#container1 {
    background: #FF0000;
    display: inline-block;
    float: left;
}

#container2 {
    background: #00FF00;
    display: inline-block;
    float: left;
}

#container3 {
    background: #0000FF;
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: -100px;
}

#content1 {
    width: 400px;
    height: 400px;
}

#content2 {
    width: 200px;
    height: 600px;
}

#content3 {
    width: 400px;
    height: 100px;
}

#wrapper {
    position: relative;
    display: inline-block;
    float: left;
}