JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="content">Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.<br> Страну снова над взгляд, домах текстов он путь свой, речью семь <br> наш переписали грустный запятой его безорфографичный свое текст! Встретил.
  Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.<br> Страну снова над взгляд, домах текстов он путь свой, речью семь <br> наш переписали грустный запятой его безорфографичный свое текст! Встретил.
  Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.<br> Страну снова над взгляд, домах текстов он путь свой, речью семь <br> наш переписали грустный запятой его безорфографичный свое текст! Встретил.
  Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.<br> Страну снова над взгляд, домах текстов он путь свой, речью семь <br> наш переписали грустный запятой его безорфографичный свое текст! Встретил.</div>
  <button>toggle</button>
</div>

CSS

.content {
  overflow: hidden;
  max-height: 50px;
  transition: max-height 0.8s;
}

.content.go{
  max-height: 100%;
}

JavaScript

$( window ).resize(function() {
	var content = $('.content');
  content.css('max-height', 'none');
  $('.wrapper').css('height', content.outerHeight());
  content.css('max-height', '');
}).trigger('resize');

$('button').on('click', function() {
	$('.content').toggleClass('go');
})