JSFiddle - React, Tailwind, and code Playground

HTML

<div class="titleheader">Learn</div>
<div class="textcontent">
    <ul>
        <li>Certified Curriculum! All instructors follow a certified curriculum which is developed by the Artistic Director, Maricza Valentin. Maricza has been teaching since 1988 and is a graduate of Columbia College-Chicago with a degree in dance performance, teaching, and choreography.</li>
        <li>Enter at ANY Skill Level! Courses are structured to meet the needs of our students and their diverse skill levels, from complete beginner to seasoned pro.</li>
        <li>Not sure where to start? Let us evaluate you for FREE. Drop by our studio any time during business hours and we will assess your skill level honestly and objectively and place you in a class best suited for you.</li>
        <li>Flexible Schedule! Classes are designed to work with your current schedule -- Monday-Friday evenings and Saturday mornings. One class = 4 sessions which meet 1 hour per week for 4 weeks.</li>
        <li>Great Workout! Be sure to wear shoes and clothing you will be comfortable dancing in.. please keep in mind, LRDS is a family setting.</li>
    </ul>
</div>
<div class="titleheader">Learn</div>
<div class="textcontent">
    <ul>
        <li>Certified Curriculum! All instructors follow a certified curriculum which is developed by the Artistic Director, Maricza Valentin. Maricza has been teaching since 1988 and is a graduate of Columbia College-Chicago with a degree in dance performance, teaching, and choreography.</li>
        <li>Enter at ANY Skill Level! Courses are structured to meet the needs of our students and their diverse skill levels, from complete beginner to seasoned pro.</li>
        <li>Not sure where to start? Let us evaluate you for FREE. Drop by our studio any time during business hours and we will assess your skill level honestly and objectively and place you in a class best suited for you.</li>
        <li>Flexible Schedule! Classes are designed to work with your current schedule --...

CSS

.titleheader {
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    background: #424242;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    margin: 5px
}
.textcontent {
    border-radius: 10px;
    display: inline;
    width: 100%;
}

JavaScript

$(function () {

        // layout flag (defaults to "not small")
        var small = false;

        // function to toggle a text section
        function toggleText(elm) {
            $(elm).toggleClass("active").next().slideToggle("fast");
        }

        // resize event handler
        $(window).on('resize', function () {


            if ($(window).width() <= 480) {

                // if window <= 480 and the layout is "not small", bind click handlers and hide all text content

                if (!small) {

                    console.log('made small');
                    $(".titleheader").on('click', function () { toggleText(this); });
                    $(".textcontent").hide();

                    // set the layout flag to "small"
                    small = true;

                }

            } else {

                // if the window > 480 and the layout is "small", unbind click handlers and hide all text
                if (small) {
                    
                    console.log('made large');
                    $(".titleheader").off('click');
                    $(".textcontent").show();
                    
                    // set the layout flag to "not small"
                    small = false;
                }

            }

        }).trigger('resize'); // initialize - trigger the resize once upon load

    });