JSFiddle - React, Tailwind, and code Playground

HTML

<div id="button">Button</div>
<br/>
<div id="test">
    <p>A child element</p>
    Text: <input type="text" name="fname" />
</div>

CSS

#button {
    border: 1px solid black;
    padding: 5px;
    display: inline-block;
    background-color: grey;
    color:white;
    font-weight: bold;
    cursor: pointer;
}

#test {
    background-color: #999999; 
    height: 50px;
    width: 200px;
    display: none;
    padding: 10px;
    text-align: center;
    color: white;
}

JavaScript

$("#button").click(function() {
    $("#test").show();
});

$('#test').mouseleave(function() {
    //$("#test").hide();
});

$('#test').mouseout(function() {
    //$("#test").hide();
});

$('#test').live('mouseleave', function(event) {
    $("#test").hide();
});

$('#test').live('mouseout', function(event) {
    //$("#test").hide();
});