JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer" style="height:150px;width:150px">
    <div id="inner" style="height:150px;width:150px"></div>
</div>
<button onclick="clickit(1);">bigger</button>
<button onclick="clickit(2);">smaller</button>
<button onclick="clickit(3);">reset</button>

CSS

#outer{
    max-width:200px;
    max-height:200px;
    background-color:red;
    overflow:auto;
}

JavaScript

window.clickit = function (mode){
    switch(mode){
        case 1:
            outer.style.height='250px';
            outer.style.width='250px';
            inner.style.height='250px';
            inner.style.width='250px';
            break;
        case 2:
            outer.style.height='100px';
            outer.style.width='100px';
            inner.style.height='100px';
            inner.style.width='100px';
            break;
        case 3:
            outer.style.height='150px';
            outer.style.width='150px';
            inner.style.height='150px';
            inner.style.width='150px';
            break;
    }
}