JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-container">
    <div class="wrapper">
        <div class="content">
            <div class="button">
                <button>Показать плавно текст</button>
            </div>
            <div class="text">
                <h3>Хорошая статья</h3>
                <p>Иероглифы, обозначающие месяцы.</p>
                <p>Дешифровка письменности майя стала возможной в XIX веке под влиянием успешной расшифровки древнеегипетской письменности, предпринятой Ж. Шампольоном. Впервые иероглифические тексты майя были опубликованы в 1810-е годы, а комплексное полевое исследование памятников этой цивилизации на территории Мексики и Гватемалы стало осуществляться начиная с 1830-х годов. В 1862 году аббат Брассёр де Бурбур обнаружил в Мадриде рукопись Диего де Ланда «Сообщение о делах в Юкатане», в которой содержались важные сведения о письме майя. В 1870—1890-х годах были опубликованы сохранившиеся кодексы майя.</p>
                <p>В этот же период делались попытки фонетического прочтения письменных знаков майя, но они были неудачными. В конце 1940-х годов комплексным изучением письма майя на основе труда де Ланда занялся Юрий Кнорозов, который на материале кодексов смог успешно решить задачу чтения. В 1963 году он опубликовал свою книгу — «Письменность индейцев майя», и в 1975 году опубликовал перевод сохранившихся кодексов майя.</p>
            </div>
        </div>
    </div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

CSS

* {
	-o-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.main-container {
	width: 600px;
	min-height: 400px;
    height: auto;
	outline: 1px solid #333;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -300px;
}

.wrapper {
	overflow-x: hidden;
}

.content {
	min-height: 400px;
	padding: 5px;
	overflow: auto;
}

.button {
	text-align: center;
}

.button button {
	padding: 5px 15px;
	cursor: pointer;
}

.text {
	display: none;
}

JavaScript

$(document).ready(function() {
	var inAnimationTextBlock = false;
	$('button').click(function() {
		if($(this).text() == 'Показать плавно текст' && !inAnimationTextBlock) {
			$(this).text('Скрыть плавно текст');
			inAnimationTextBlock = true;
			var timer = setInterval(function() {
				hideScroll($('.content'));
			}, 20);
			$('.text').slideDown(500, function() {
				inAnimationTextBlock = false;
				clearInterval(timer);
			});
		}
		else if($(this).text() == 'Скрыть плавно текст' && !inAnimationTextBlock) {
			$(this).text('Показать плавно текст');
			inAnimationTextBlock = true;
			var timer = setInterval(function() {
				hideScroll($('.content'));
			}, 20);
			$('.text').slideUp(500, function() {
				inAnimationTextBlock = false;
				clearInterval(timer);
			});
		}
	});

	function hideScroll(element) {
		var jsObject = element.get(0);
		var scrollWidth = jsObject.offsetWidth - jsObject.clientWidth;
		if(scrollWidth) {
			element.width(element.parent().width() + scrollWidth)
		}
		else {
			element.css('width', 'auto');
		}
	}
});