JSFiddle - React, Tailwind, and code Playground

HTML

<h2>My Paragraph</h2>
<p><span id="more">Read More</span></p>
<p id="the_more">
    Test paragraph<br />
    What is here?
</p>

CSS

h2 { float: left; margin-top: 20px; margin-bottom: 20px;  }
#more { float: right; margin-top: 20px; border: 1px solid black; margin-bottom: 20px; }
#the_more { clear: both; border: 1px dashed red; }

JavaScript

$('#the_more').hide();
$('#more').click(function() {
    $('#the_more').slideToggle("slow", function () {
        $('#more').text(function (index, text) {
            return (text == 'Read More' ? 'Read Less' : 'Read More');
        });
    });
    
    return false;
});