JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td style="vertical-align: top;">
            <table>
                <tr>
                    <td class='sidebar-header'>
                    header
                    </td>
                </tr>
                <tr>
                    <td class='sidebar-body' style="height: 40px;">
                    menu
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table>
                <tr>
                    <td class='body-header-all'>
                        main <br/>
                        sub title
                    </td>
                </tr>
                <tr>
                    <td class='body-all'>
                        main contents
                                                main contents                        main contents                        main contents                   asdafd
                        a
                        dfadsfadfadfadfa adf adf a dfafa fdaf adf adfadf adsfa fadf adf af adf a fdaf dadf adf af adf a dfadf af daf adfaf af af af afd afd ad a
                        adf
                        a
                        dsfadmain contents                        main contents                        main contents                        main contents                        main contents
                        <br/><br/>
                        help@jewonagency.com
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table

CSS

table {
    border: 1px solid red;
    padding: 0px;
    margin: 0px;
}
td {
    border: 1px solid blue;
}

JavaScript

$(document).ready(function() {
    
var menuheight = $('.body-header-all').height() + $('.body-all').height() - $('.sidebar-header').height();

$('.sidebar-body').height(menuheight);
    
});