JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>

<head>

</head>

<body>
  
   <div class="parent">
     
      <div class="child">
        
      </div>
     
   </div>

</body>

</html>

CSS

.parent {
  width: 40%;
  height: 200px;
  position: relative;
  background-color: red;
}

.child {
  width: 0px;
  height: 200px;
  position: absolute;
  right: 0;
  top: 0;
  background-color: aqua;
}

JavaScript

$(document).ready(()=> {

	drop = false;

  $(".parent").click(()=> {

    if(drop == true) {
    
      $(".child").animate({width: "0px"});
      drop = false;
      
    } else if(drop == false) {
    
      $(".child").animate({width: "200px"});
      drop = true;
      
    }

  })

});