JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>

Краткий текст
<div class="more-text">
Много текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текстаМного текста
</div>
<a href="#" class="url-more-text"><span class="open">Подробнее</span><span class="minim">Свернуть</span></a>

CSS

.more-text {
  max-height: 0px;
  overflow: hidden;
  transition: max-height .2s ease-out;
}
.more-text.open {
  max-height: 10000px;  
  transition: max-height .2s ease-out;
}
.url-more-text {
  float: right;
}
.more-text.open + .url-more-text .minim,
.more-text + .url-more-text .open {
  display: inline-block
}
.more-text.open + .url-more-text .open,
.more-text + .url-more-text .minim {
  display: none
}

JavaScript

$('.url-more-text').click(
function() {
  $(this).siblings(".more-text").toggleClass("open");
});