JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  
  <div class="item left">
      <div class="hover"></div>
      <div class="content">A</div>
  </div>
  <div class="item right">
      <div class="hover"></div>
      <div class="content">B</div>
  </div>
  
</div>

CSS

.container{
 width:400px;
  height:100px;
  border:solid 1px;
  position:relative;
  margin:200px auto;
  overflow:hidden;
}

.container .item{
 position:absolute;
  width:50%;
  height:100%;
  text-align:center;
  line-height:100px;
  
}
.right{
  right:0;
  border-left:1px solid;
}


.item>div{
  position:absolute;
  width:100%;
  height:100%;
}

.left .hover{
  left:-50%;
}

.right .hover{
  right:-50%;
}

.item .content{
  z-index:-1;
  opacity:0;
}

.left .content{
  background:red;
}
.right .content{
  background:blue;
}

.item .content:after{
  position:absolute;
  content:'';
  width:200%;
  height:100%;
}

.left .content:after{
  left:0;
}
.right .content:after{
  right:0
}

.hover:hover ~ .content{
  z-index:1;
  opacity:1;
}
.content:hover{
   z-index:1;
   opacity:1;
}