JSFiddle - React, Tailwind, and code Playground

HTML

<input id="myInput" type="text"/>
<myContainer id="myContainer">
    <outerThing id="outerThing">
        <myThing id="myThing"></myThing>
    </outerThing>
</myContainer>
<button type="button" onclick="buttonClick()">show container</button>

CSS

#myContainer {
    position: absolute;
    top:100px;
    bottom:auto;
    right:auto;
    left:100px;
    width:200px;
    height:200px;
    display: none;
    background-color: red;
}

#outerThing{
    width:50px;
    height:50px;
    margin-top: 10px;
    margin-left: 10px;
    display: block;
    background-color: white;
}

#myThing{
    width:20px;
    height:20px;
    margin-top: 15px;
    margin-left: 15px;
    display: none;
    background-color: blue;
}

JavaScript

function buttonClick() {
    
    document.getElementById("myInput").focus();
    
    var cont = document.getElementById("myContainer");
    cont.style.display = "block";
    
    var outerThing = document.getElementById("outerThing");
    $( outerThing ).hover(
    function()
    {
        $(this).children(":last").css( "display", "inline-block" );
    },
    function()
    {
        $(this).children(":last").css( "display", "none" );
    });

}