JSFiddle - React, Tailwind, and code Playground

HTML

<div id="q1">
    <div id="q2">
        <div>что-то такое и ещё что-то вверху</div>
    </div>
    <div id="q3">
        <div>
            <div>
                текст текст текст текст текст текст текст<br>
                текст текст текст текст текст текст текст<br>
                текст текст текст текст текст текст текст<br>
                текст текст текст текст текст текст текст<br>
            </div>
        </div>
    </div>
    <div id="q4">
        <div>что-то такое и ещё много чего-то такого внизу</div>
    </div>
</div>

CSS

html,
        body {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #q1 {
            display: table;
            width: 100%;
            height: 100%;
            background-color: red;
            text-align: center;
        }

        #q1 > div {
            display: table-row;
            width: 100%;
        }

        #q1 > div > div {
            display: table-cell;
            width: 100%;
            padding: 20px;
            vertical-align: middle;
        }

        #q2 > div {
            height: 150px;
            background-color: #aaa;
        }

        #q3 > div {
            height: 100%;
            background-color: #5a5;
        }

        #q3 > div > div {
            background-color: #f5e79e;
        }

        #q4 > div {
            height: 50px;
            border: solid 2px #a55;
        }