JSFiddle - React, Tailwind, and code Playground

HTML

<div class='wrap'>
    <div class='green'></div>
    <div class='red'></div>
    <div class='blue'></div>
</div>

CSS

html, body {
    height: 100%;
}
.wrap {
    position: relative;
    background: black;
    height: 100%;
}
.wrap div {
    position:absolute;
    bottom:0;
}


.red {
    width: 20%;
    height: 200px;
    background: red;
    left:30%;
}
.blue {    
    height: 200px;
    background: blue;
    left:50%;
    right:0;
}