JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<p>石炭をば早や積み果てつ。中等室の卓のほとりはいと静にて、熾熱燈の光の晴れがましきも徒なり。今宵は夜毎にこゝに集ひ来る骨牌仲間も「ホテル」に宿りて、舟に残れるは余一人のみなれば。</p>
	<p>五年前の事なりしが、平生の望足りて、洋行の官命を蒙り、このセイゴンの港まで来し頃は、目に見るもの、耳に聞くもの、一つとして新ならぬはなく、筆に任せて書き記しつる紀行文日ごとに幾千言をかなしけむ、当時の新聞に載せられて、世の人にもてはやされしかど、今日になりておもへば、穉き思想、身の程知らぬ放言、さらぬも尋常の動植金石、さては風俗などをさへ珍しげにしるしゝを、心ある人はいかにか見けむ。こたびは途に上りしとき、日記ものせむとて買ひし冊子もまだ白紙のまゝなるは、独逸にて物学びせし間に、一種の「ニル、アドミラリイ」の気象をや養ひ得たりけむ、あらず、これには別に故あり。</p>
</div>

CSS

div {
  background-color: #fff;
}

div p {
  width: 500px;
  max-height: 48px;
  line-height: 1.5;
  overflow: hidden;
  position: relative;
}
div p:after {
  content: "...";
  display: inline-block;
  position: absolute;
  top: 24px;
  right: 0;
  width: 8em;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), white 75%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 75%);
  text-align: right;
}
div p:nth-of-type(2) {
  max-height: 96px;
  line-height: 1.5;
  overflow: hidden;
  position: relative;
}
div p:nth-of-type(2):after {
  content: "...";
  display: inline-block;
  position: absolute;
  top: 72px;
  right: 0;
  width: 8em;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), white 75%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 75%);
  text-align: right;
}
div p.expand {
  -webkit-animation: maxHeight .2s ease-in .2s both;
          animation: maxHeight .2s ease-in .2s both;
}
div p.expand::after {
  content: initial;
}

@-webkit-keyframes maxHeight {
  from {
    height: 0.5%;
    max-height: 0%;
    -webkit-transform-origin: 0% 20%;
            transform-origin: 0% 20%;
    -webkit-transform: perspective(1200) rotateX(180deg);
            transform: perspective(1200) rotateX(180deg);
    overflow: hidden;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  to {
    max-height: 100%;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}

@keyframes maxHeight {
  from {
    height: 0.5%;
    max-height: 0%;
    -webkit-transform-origin: 0% 20%;
            transform-origin: 0% 20%;
    -webkit-transform: perspective(1200) rotateX(180deg);
            transform: perspective(1200) rotateX(180deg);
    overflow: hidden;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  to {
    max-height: 100%;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}

JavaScript

(function($){
	$(function(){
		$("p").on("click",function(){
			
			$(this).toggleClass("expand");
			
		});
	});
})(jQuery);