JSFiddle - React, Tailwind, and code Playground

by Persijn Kwekkeboom

HTML

<main>
    <div class="four">row 1</div>
    <div class="four">row 2</div>
    <div class="contain">
        <div class="free">row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free! row 3 if free!</div>
        <div class="rest">row 4</div>
    </div>
    <div class="last">row 5</div>
</main>

CSS

html {
    height: 100%;
}
body {
    margin:0;
    height: 100%;
}
main {
    width: 200px;
    height: 100%;
}
.four {
    height: 40px;
    outline: 2px solid black;
}
.contain {
    height: calc(100% - 120px);
}
.free {
    height: 70%;
    outline: 2px solid red;
}
.rest {
    height: 30%;
    outline: 2px solid blue;
}
.last {
    position: absolute;
    width: 200px;
    height: 40px;
    outline: 2px solid black;
    bottom: 0;
}