JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cont">
    <div class="box">
        <div class="text">Texto Único 1</div>
    </div>
    <div class="box">
        <div class="text">Texto Único 2</div>
    </div>
    <div class="box">
        <div class="text">Texto Único 3</div>
    </div>
</div>

CSS

div {
    padding: 10px;
    border: 3px solid #bbd;
}

JavaScript

function animar(el, h){
    $(el).stop().animate({'height': h}, 500);    
}
$(document).ready(function () {
    var caixasTexto = $('.box .text');
    var textoExpandido = {
        el: null,
        aberto: false
    };
    caixasTexto.on('click', function (e) {
        if (this == textoExpandido.el) textoExpandido.aberto = !textoExpandido.aberto;
        else {
            animar(textoExpandido.el, '20px');
            textoExpandido.aberto = true;
            textoExpandido.el = this;
        }
        animar(textoExpandido.el || this, textoExpandido.aberto? '100px' : '20px');
    });

});