JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="top">TOP<br>content</div>
    <div class="middle">MIDDLE</div>
    <div class="bottom">BOTTOM<br>content<br>content</div>
</div>

CSS

.container {
    background-color: #1abc9c;
    width: 600px;
    height: 200px;
    padding: 10px;
    color: #fff;
    display: table;
}
.top {
    background-color: #3498db;
    display: table-row;
}
.middle {
    background-color: #9b59b6;
    height: 100%;
    display: table-row;
}
.bottom {
    background-color: #34495e;
    display: table-row;
}