JSFiddle - React, Tailwind, and code Playground

HTML

<table class="questionsTable">
    <col width="25%" />
    <col width="25%" />
    <col width="25%" />
    <col width="25%" />
    <tr>
        <td class="questionTitle" height="20px" colspan="4">Space 1 (fixed height, 20px)</td>
    </tr>
    <tr>
        <td class="questionsList" rowspan="2">Space 2 (scrollable, 25% width, fixed height in page)
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>Space 2
            <br/>
        </td>
        <td height="auto" colspan="3">Space 3 (fills the remaining space)</td>
    </tr>
    <tr>
        <td class="questionActions" height="20px" colspan="4">Space 4 (fixed height, 20px)</td>
    </tr>
</table>

CSS

html, body {
    margin:0;
    padding:0;
    height:100%;
    border:none;
}
table, td {
    border: 1px solid black;
}
.questionsTable {
    width: 100%;
    height: 100%;
}
.questionsList {
    overflow-x: auto;
    overflow-y: scroll;
}
.questionTitle .questionActions {
    overflow: hidden;
    height: 20px;
}