JSFiddle - React, Tailwind, and code Playground

by vals

HTML

<div class="container">
<div class="base">
<p>aaa
aaaaa
aaaaa
aaaaaaaa aaaa
aaa aaa aaaa
bbbbbb bbbbbb
cccc cccc cccc
</p>
</div><div class="hide"></div>
</div>

CSS

.container {
    width: 120px;
    height: 130px;
    padding: 0px;
    border: 0px;
    margin: 0px;
    position: absolute;
}
.base {
    width: 100px;
    background-color: white;
    top: 0px;
    position: absolute;
    height: 130px;
    overflow: hidden;
    padding-right: 20px;
}
.base.clipped {
    overflow: auto;
}


.hide {
    position: absolute;
    width: 19px;
    height: 100%;
    right: 0px;
    background-color: white;
    top: 0px;
    -webkit-transition: all 2s;
    z-index: 10;
}

.hide.clipped {
    background-color: transparent;
}

JavaScript

$(".container").click(function(){
  var obj = $(".base");
  var hid = $(".hide");
  if (obj.hasClass("clipped")) {
     hid.removeClass("clipped");
     setTimeout(function() {
      obj.removeClass("clipped");
     }, 2000);
  } else {
     hid.addClass("clipped");
     obj.addClass('clipped');
  }
});