JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div class="wrap">
    <div class="one">... content 1 ...</div>
    <div class="two">... content 2 ...</div>
    <div class="three">... content 3 ...</div>
</div>

CSS

html, body, .wrap {
    height: 100%;
    margin: 0;
    padding: 0;
}
.wrap {
    position: relative;
    width: 50%;
}
.one, .two, .three {
    position: absolute;
    left: 0;
    width: 100%;
    background: teal;
}
.one {
    height: 50px;
    top: 0;
}
.two {
    height: 80px;
    bottom: 0;
}
.three {
    top:50px;
    bottom:80px;
    background: gold;
}