JSFiddle - React, Tailwind, and code Playground

HTML

<div class="beforeAfterSlidebar">
    <img id="topImg" src="http://upstairsweb.com/images/afterImage.jpg" width="800" height="600" alt="after" />
        <img id="middleImg" src="http://placehold.it/300" width="800" height="600" alt="middel"/>
    <img id="botImg" src="http://upstairsweb.com/images/beforeImage.jpg" width="800" height="600" alt="before" />

</div>

CSS

.beforeAfterSlidebar {
  position: relative;
  width: 800px;
  height: 600px;
}
.beforeAfterSlidebar img {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
.topImg {
  border-right: solid 2px copper;
}

JavaScript

$(".topImage").css('width', '50%');
  $(".beforeAfterSlidebar").mousemove(
    function(e) {
      // get the mouse x (horizontal) position and offset of the div
      var offset =  $(this).offset();
      var iTopWidth = (e.pageX - offset.left);

      // set width of bottomimage div
      //$(this).find(".topImage").width(iTopWidth);
      $(this).children("#middleImg").css("clip", "rect(0px," +  (iTopWidth + 50) + "px,600px,"+(iTopWidth - 50) +"px)");
        $(this).children("#botImg").css("clip", "rect(0px," +  (iTopWidth - 50) + "px,600px,0)");
    }
  );