JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="up">Text
        <br />Text
        <br />Text
        <br />
    </div>
    <div id="middle">Text
        <br />Text
        <br />Text
        <br />
    </div>
    <div id="down">Text
        <br />Text
        <br />Text
        <br />
    </div>
</div>

CSS

#container {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    display: flex;
    flex-direction: column;
}
#middle {
    flex-grow: 1;
}
#up {
    background: green;
}
#down {
    background:pink;
}