JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="header">
        Header
    </div>
    <div id="content">
        <input id="button" type="button" value="Click to Show/Hide" />
        <div id="expand"><p>a</p><p>b</p><p>c</p></div>
        <div id="dynamic">
        <span id="target" style="font-size: 1000%">Content</span>
        </div>
    </div>
    <div id="footer">
        Footer
    </div>
</div>

CSS

body,html{
    height: 400px;
    max-height: 400px;
}

#wrapper{
    padding: 10px;   
    vertical-align: middle;
    background-color: cyan;
    min-height: 100px;
    height: 300px;
    max-height: 300px;    
}

#expand{
    background-color: yellow;
}

#dynamic{
    background-color: green;
    overflow: auto;
    overflow-x: hidden;
    min-height: 40px;
}

#header,#footer{
    background-color: purple;
}

JavaScript

$('#button').click(function(){
    if($('#expand').is(":visible"))
        $('#expand').hide();
    else
        $('#expand').show();
});