JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="div1">

  </div>
  <div class="div2">

  </div>
  <div class="div3">

  </div>
</div>

CSS

.wrapper {
  width: 400px;
  height: 200px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.div1 {
  background: red;
}

.div2 {
  background: green;
}

.div1:hover ~ .div3, .div2:hover ~ .div3  {
  display: block;
}

.div3 {
  display: none;
  background: blue;
}

.div3:hover {
  display: block;
}