JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">some content<br />
<button id="resize">Resize</button></div>
<div id="menu">
    some menu stuff
</div>
<div id="more_content">
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
    extra content<br />
</div>

CSS

body {font-size: 16px; padding: 0; margin: 0; }

div { padding: 5px; margin: 0; }

div#content {
    background-color: #ff0000;
}

div#menu {
    background-color: #00ff00;
}

div#more_content {
    background-color: #0000ff;
    height: 345px;
    overflow: auto;
}

JavaScript

$(document).ready(function() {
    $('#resize').click( function() {
        //append some more data for testing
        $('#menu').html($('#menu').html()+'<br />some more menu stuff');
        
        //call the function
        resize();
    });    
    
    function resize() {
        var that = $('#more_content')
            var m_height = $('#menu').height(); //height of menu div
        var s_height = 20;//height of menu div if only single line
        
        if(m_height != s_height)
            $(that).height(($(that).height() - (m_height -s_height)));
    }
});