JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<div id="wrapper">
    <div id="left">
        <div id="innerleft">
            TITLE 1
        </div>
    </div><div id="right">
        <div id="innerright">
            TITLE 2
        </div>
    </div>
</div>

CSS

* {
  margin: 0px;
  padding: 0px;
}
#wrapper {
  width: 80%;
  height: 200px;
  margin: auto;

}
#left {
  width: 50%;
  height: 100%;
  background-color: lightblue;
  display: inline-block;
  position: relative;
}
#innerleft {
  position: absolute;
  top: 100px;
  width: calc(100% - 4px);
  text-align: center;
  border: 2px solid black;
}
#right {
  width: 50%;
  height: 100%;
  background-color: lightgrey;
  display: inline-block;
  position: relative;
}
#innerright {
  position: absolute;
  top: 100px;
  width: calc(100% - 4px);
  text-align: center;
  border: 2px solid black;
}

JavaScript

var w = Math.floor($("#wrapper").width()) - 10;
$("#innerleft").mouseenter(function(){
    $("#left").animate({width: Math.floor(w * 0.75) + "px"}, 2000);
    $("#right").animate({width: Math.floor(w * 0.25) + "px"}, 2000);
});
$("#innerright").mouseenter(function(){
    $("#left").animate({width: Math.floor(w * 0.25) + "px"}, 2000);
    $("#right").animate({width: Math.floor(w * 0.75) + "px"}, 2000);
});