JSFiddle - React, Tailwind, and code Playground
HTML
<div class='title'>Blah blah blaaaah</div>
<div class='show'>Show/hide description</div>
<div class='desc'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis finibus mattis quam, eu sollicitudin nibh fermentum at. Nullam risus neque, hendrerit quis ante efficitur, mollis pharetra ante. Aliquam tincidunt justo eget tincidunt lacinia. Vivamus eget sapien non urna posuere dignissim. Quisque risus odio, venenatis vel ante vitae, vulputate scelerisque nisl. Nullam egestas eleifend justo vel faucibus. Morbi eu mauris nulla. Suspendisse ornare, eros sit amet pretium rutrum, ante tortor tempus eros, non luctus erat dolor in neque. Curabitur purus est, sodales ac ante ac, accumsan varius nisl. Quisque mattis ornare diam. Nullam ultrices nunc eget imperdiet gravida. Proin porttitor purus eu erat iaculis tempus.
Nulla dapibus, massa nec rutrum cursus, quam nunc tincidunt dolor, in molestie orci lectus volutpat orci. Cras non ex venenatis, varius mauris vel, viverra urna. In hac habitasse platea dictumst. Etiam egestas aliquam est at finibus. Morbi id auctor elit. Duis dapibus neque non rhoncus iaculis. Proin sagittis erat vitae mauris vulputate, posuere scelerisque nunc pellentesque. Aliquam lobortis lacus sem, eu varius ipsum commodo at. Nunc eu accumsan nibh. Nunc sem urna, hendrerit euismod ligula ut, aliquet semper purus. In sed turpis blandit, pharetra augue vel, ultricies nisi. In congue consectetur neque quis tempus. Phasellus venenatis arcu vitae magna placerat, ut ultricies lacus congue. Sed vel erat vitae lorem porttitor vehicula. Duis at luctus nisi. Curabitur a purus id enim gravida varius.
Curabitur commodo mi nec pellentesque gravida. Nulla nec orci pharetra, ornare purus at, finibus nulla. Integer accumsan nunc neque. Duis a elit in tortor pellentesque accumsan dignissim in tellus. Pellentesque sed magna eu erat gravida lacinia. Aenean convallis nec ipsum id pretium. Aenean sollicitudin, quam eu auctor pellentesque, est arcu pharetra mauris, a...
CSS
.title{
font-size: 15px;
font-weight: bold;
}
.desc{
text-align: justify;
}
@media screen and (max-width:550px){
.desc{
overflow: hidden;
max-height: 125px;
}
}
@media screen and (max-width:350px){
.desc{
display: none;
}
}
.display{
overflow: visible;
display: block;
}
JavaScript
$('.show').on('click', function(){
if ($('.desc').hasClass('display')){
$('.desc').removeClass('display');
}else{
$('.desc').addClass('display');
}
});