JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="item">
    <p class="primary">Primary</p>
    <p class="secondary">Secondary</p>
</div>

<div class="item">
    <p class="primary">Primary</p>
    <p class="secondary">Secondary</p>
</div>

<div class="item">
    <p class="primary">Primary</p>
    <p class="secondary">Secondary</p>
</div>

<div class="item">
    <p class="primary">Primary</p>
    <p class="secondary">Secondary</p>
</div>

CSS

.primary{
    cursor:pointer;
}
.secondary{
    display:none;
    cursor:pointer;
}

.item{
    padding: 10px;
    width: 50px;
    height: 50px;
}

JavaScript

$('.item').click(function () {
    if ($(".secondary", this).is(":hidden")) {
        $(".primary", this).toggle('slide', {
            direction: 'right'
        }, 500, function () {
            $('.secondary', this).toggle('slide', {
                direction: 'left'
            }, 500);
        });

    }
});