JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="one">
       <p>Hover to hide div below</p>
    </div>
      <div id="two">
       <p>hide me please</p>
    </div>
</div>
<div id="main">
    <div id="one">
       <p>Hover to hide div below (this works)</p>
       <div id="two">
       <p>hide me please</p>
    </div>
    </div>
      
</div>

CSS

#one{
  background-color:green;
  color:white;
  height:40px;
}
#two{
  background-color:red;
  color:white;
  height:40px;
  display:in-line;
}
/* Help please */
#one:hover > #two {
    display:none;
}
#main #one:hover > #main #two {
  display:none;
}