JSFiddle - React, Tailwind, and code Playground

HTML

<div class="toggle">
<div class="toggle1">

</div>
<div class="togglebtn">

</div>
<div class="toggle2">

</div>
</div>

CSS

.toggle{
  width: 500px;
  height: 200px;
  display: flex;
  flex-direction: row;
  background-color: grey;
}

.toggle1{
  width: 400px;
  height: 200px;
  background-color: red;
}

.togglebtn{
  width: 100px;
  height: 200px;
  background-color: blue;
}

.toggle2{
  width: 400px;
  height: 200px;
  background-color: green;
}

JavaScript

$(document).ready(function () {

    $(".toggle2").hide();
    $(".toggle1").show();

    $('.togglebtn').hover(function () {
        $(".toggle1").stop(true,true).animate({width: 'toggle'});
        $(".toggle2").stop(true,true).animate({width: 'toggle'});
    });

});