JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container" id="test">
    <section class="one" onmouseenter="resetDisplay('new1');"><h2 id="new1" onclick="changeClick(id)">Section</h2></section>
    <aside class="two"><h2 id="new2" onclick="changeClick(id)">Aside</h2></aside>
</div>
<script>
function changeClick(doc){
    if(doc === "new1"){
      document.getElementById(doc).style.display="none";
    }

 }      
function resetDisplay(doc){
    if(doc === "new1"){
      document.getElementById(doc).style.display="";
    }

 }      
</script>

CSS

body {
  font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}

.container,
section,
aside {
  border-radius: 6px;
}
section,
aside {
  background: #2db34a;
  color: #fff;
  margin: 1.858736059%;
  padding: 20px 0;
  text-align: center;
}
section {
  float: left;
  width: 63.197026%;
}
aside {
  float: right;
  width: 29.3680297%;
}

section:hover,
aside:hover {
  color: red;

}