JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
  <div id="child-left"></div>
  <div id="child-right"></div>
</div>

SCSS

#parent {
background: green;
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
&:hover {
  background: rgba(0,0,0,0.8);
}

#child-left {
  background: red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: -50px;
}
#child-right {
  background: red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50px;
left: 100px;
}
}

#child-left,
#child-right {
  pointer-events: none;
}