JSFiddle - React, Tailwind, and code Playground

HTML

<table id="wrapper" border="1">
    <tr>
        <td id="col_1">col 1</td>
        <td id="col_2">col 2</td>
    </tr>
    <tr>
        <td id="big_cell">
            <div id="big_div">
                big div
            </div>                        
        </td>
        <td id="col_3"> col 3</td>
    </tr>    
    <tr>
        <td colspan="2" id="col_4">col 4</td>
    </tr>
</table>

CSS

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

#wrapper {
    background-color: #ccccff;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

#col_1, #col_2, #col_4{
    height: 100px;
}

#big_div{
    border:2px solid #21668f;
    width: 100%;
    height:100%;
    height: 45%!important;
}

#big_cell {
    height:100%;
}