JSFiddle - React, Tailwind, and code Playground

HTML

<div class="widget">
<table cellpadding="0" cellspacing="0">
    <tr class="widget-header">
        <td>Занимает 20 пикселей сверху</td>
    </tr>
    <tr class="widget-content">
        <td>Эта серая ячейка занимает всю оставшуюся свободную высоту таблицы
</td>
    </tr>
    <tr class="widget-footer">
        <td>Занимает 20 пикселей снизу</td>
    </tr>
</table>
</div>

CSS

.widget{
    position:absolute;
    min-width:200px;
    width:200px;
    outline:1px solid gray;
    right:50%;
    top:20px;
}
.widget > table{
    height:100%;
    width:100%;
}
.widget-header{
    height:20px;
}
.widget-content{
    vertical-align:top;
    background:gray;
    overflow:auto;
}
.widget-footer{
    height:20px;
}



/*resizable, not important*/
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }

JavaScript

$(function(){
    $('div.widget')
        .resizable({handles:'s'})
        })