JSFiddle - React, Tailwind, and code Playground

HTML

<div id="artcile-actions" class="col-lg-12">
			<article>
				<span>13.12.14</span>
				<img class="img-thumbnail" src="https://api.fnkr.net/testimg/190x155/1f73c7/FFF/?text=img+actions" alt="Акция">
				<h2>Акция</h2>
				<div class="article-body">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique et, nemo eaque reiciendis omnis ipsam. Voluptate nostrum doloribus maxime recusandae qui placeat quia eveniet quis minus, dolor, reiciendis dolores! Rerum.</p>
					<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil a adipisci quasi possimus reprehenderit sint nostrum, corrupti aliquam quam illum, tenetur nam dignissimos necessitatibus, itaque. Hic esse, repellendus. Alias, deserunt.</span>
						<span>Quaerat quibusdam debitis facere iusto assumenda ab tempora alias, aliquid, repudiandae facilis, autem unde sit. Consequuntur, accusamus in, earum aspernatur incidunt optio. Molestiae quibusdam, qui corrupti, voluptates aut nam totam.</span>
						<span>Maxime, voluptas, fugit. Quaerat pariatur rem facere suscipit adipisci asperiores impedit ea rerum, cumque perferendis quibusdam harum quisquam temporibus similique unde quia repellat commodi repudiandae illum dicta tempora illo odio.</span>
						<span>Magni possimus maiores, sapiente temporibus aut, impedit. Repellendus consequatur vero fuga ipsa nobis veniam doloribus quisquam quae a quo provident aspernatur, magnam dolores minima commodi debitis odio? Veniam, amet, facere?</span>
						<span>Totam voluptas ipsum obcaecati doloremque facilis porro necessitatibus ipsam dolore. Voluptatum totam at eveniet nemo odio ad quo, nihil amet praesentium! Sunt quisquam recusandae, deleniti minus deserunt commodi est exercitationem.</span>
					</p>
				</div>
				<a class="btn btn-show" href="">Развернуть</a>
				<a class="btn btn-hide" href="">Скрыть</a>
			</article>
			<article>
				<span>13.12.14</span>
				<img class="img-thumbnail"...

CSS

#artcile-actions article{
	border-bottom: 1px solid #c7c7c7;
	overflow: hidden;
	padding-bottom: 25px;
	padding-top: 25px;
}
#artcile-actions article span{
	display: block;
}
#artcile-actions article img{
	float: left;
	margin-right: 15px;
	margin-bottom: 5px;
}
#artcile-actions article h2{
	margin-top: 0;
	font-size: 24px;
	color: #1f73c7;
	
}
#artcile-actions article div{
	margin-left: 215px;
	overflow: hidden;
}
.article-body{
	height: 135px;
}
.btn-show, .btn-show:hover, .btn-hide, .btn-hide:hover{
	float: left;
	margin-left: 200px;
	font-size: 16px;
	text-decoration: underline;
	color: #1f73c7;
	font-weight: 600;
}
.btn-hide{
	display: none;
}
.img-thumbnail{
	border-radius: 0;
}
.show-post {
	height: 400px;
  -webkit-transition: height 1s;
  -ms-transition: height 1s;
  -o-transition: height 1s;
  -moz-transition: height 1s;
  transition: height 1s;
}
.hide-post {
	height: 135px;
  -webkit-transition: height 1s;
  -ms-transition: height 1s;
  -o-transition: height 1s;
  -moz-transition: height 1s;
  transition: height 1s
}

JavaScript

$(".btn-show").on('click', function(event) {
		event.preventDefault();
		$(this).css({
			display: 'none'
		});
		$(this).siblings('.btn-hide').css({
			display: 'block'
		});
		$(this).siblings('.article-body').addClass('show-post').removeClass('hide-post');
		var h = $(this).siblings('.article-body').height();
		console.log(h);
	});
	$(".btn-hide").on('click', function(event) {
		event.preventDefault();
		$(this).css({
			display: 'none'
		});
		$(this).siblings('.btn-show').css({
			display: 'block'
		});
		$(this).siblings('.article-body').removeClass('show-post').addClass('hide-post');
		var h = $(this).siblings('.article-body').width();
		console.log(h);
	});