JSFiddle - React, Tailwind, and code Playground

HTML

<div class="group">
  <div class="group__text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fringilla efficitur turpis in gravida. Maecenas non neque velit. Etiam aliquam, lorem scelerisque consectetur accumsan, risus dolor semper urna, sit amet auctor urna turpis ac arcu. Vivamus id vehicula est. Nunc a urna luctus libero hendrerit scelerisque. Vivamus laoreet diam in neque lacinia lacinia. Nunc nec placerat lacus. Aenean at enim ac enim ornare interdum. Proin in mauris cursus velit bibendum sollicitudin. Phasellus in rutrum mi. Sed velit magna, ultrices quis risus sit amet, placerat egestas purus. Vestibulum est lorem, malesuada ut turpis nec, molestie interdum lorem. Vestibulum id egestas leo. Integer nec justo ex. Donec eu accumsan velit. Aenean pharetra velit justo, at posuere arcu gravida sed.</p>
  </div>
  <span class="group__more">тогл</span>
</div>

CSS

.group {
  width:200px;
}
.group__text {
  overflow:hidden;
  height:60px;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
  outline:1px solid red;
}
.group__text p {
  font-size:15px;
  line-height:20px;
  margin:0;
}
.group__more {
  display:inline-block;
  cursor:pointer;
  margin:10px 0 0;
}

JavaScript

$('.group__more').on('click', function() {
	var t = $(this).siblings('.group__text');
	if ( $(this).hasClass('opened') ) {
  	var h = 60;
  } else {
  	var h = t.find('p').height();
  }
  t.css({
  	height: h
  });
  $(this).toggleClass('opened');
});