JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer" onclick="toggle(true)">
    <div id="inner" onclick="toggle(false)">x
    </div>
</div>

CSS

#outer{
    background:red;
    height:50px;
    width:100px;
    cursor:pointer;
}

#inner{
    background:blue;
    height:30px;
    width:30px;
    display:none;
    cursor:pointer;
}

JavaScript

function toggle(x)
{
    var o = document.getElementById('outer');
    var i = document.getElementById('inner');
    if (x===true)
    {
        alert('should run');
     o.style.height = '200px';
     o.style.width = '400px';
     i.style.display = 'block'; 
    }
    else if (x===false)
    {
     o.style.height = '50px';
     o.style.width = '100px';
     i.style.display = 'none';    
    }
    else
        alert(x);
}