JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div class="wrap">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

CSS

html, body, .wrap {
    height: 100%;
    margin: 0;
    padding: 0;
}
div {
    box-sizing: border-box;
}
.wrap {
    position: relative;
    width: 50%;
    padding: 50px 0 80px;
    border: 5px solid tomato;
}
.one, .two {
    position: absolute;
    left: 0;
    width: 100%;
    border: 5px solid teal;
}
.one {
    height: 50px;
    top: 0;
}
.two {
    height: 80px;
    bottom: 0;
}
.three {
    height: 100%;
    background: gold;
}