JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <div id="inner">
    </div>
</div>

<div id="outer-two">
    <div id="inner-two">
        &nbsp;
    </div>
</div>

CSS

#outer {
    width: 100px;
    height: 90px;
    background: #aaa;
}
#inner {
    width: 120px;
    height: 80px;
    background: #e5e5e5;
}

#outer-two {
    margin-top: 20px;
    width: 100px;
    height: 90px;
    background: #aaa;
}
#inner-two {
    background: #e5e5e5;
}

JavaScript

$(document).ready(function() {
    
    var outerOne = document.getElementById("outer"),
        innerOne = document.getElementById("inner"),
        outerTwo = document.getElementById("outer-two"),
        innerTwo = document.getElementById("inner-two");
    innerOne.onclick = resizeOne;
    outerTwo.onclick = resizeTwo;
    innerTwo.onClick = resizeTwo;
    
    function resizeOne() {
        outerOne.style.width = (outerOne.offsetWidth == '100' ? '50px' : '100px');
    }
    
    function resizeTwo() {
        console.log("hello");
        outerTwo.style.width = (outerTwo.offsetWidth == '100' ? '50px' : '100px');
    }
    
});