JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">parent
    <div id="child1">child1</div>
      <div id="child2">child2</div>
</div>

CSS

#parent{
    position:absolute;
    top:50px;
    left:10px;
    width:90px;
    height:90px;
    background-color:red;
}
#child1
{
    position:absolute;
    bottom:0px;
    width:90px;
    height:90px;
     display:flex;
    align-items:flex-end;
    background-color:cyan;
    vertical-align: text-bottom
}

#child2
{
    position:absolute;
    pointer-events:auto;
    width:80px;
      top:5px;
    height:50px;
    display:flex;
    align-items:flex-end;
    background-color:gray;
    vertical-align: text-bottom
}

JavaScript

function onMouseOut(event) {
    alert('MouseOut');
    // handle mouse event here!
};


    document.getElementById("child1").addEventListener('mouseout',onMouseOut,true);