JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="headline">Headline exaple</div>
    <p class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae quia nulla, rem harum, minima sint assumenda perferendis cupiditate rerum corporis obcaecati, quam natus repudiandae veniam dolor. Maiores commodi sequi, esse.
    </p>
</div>

CSS

.container {
    width: 400px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.headline {
    background: #ccc;
    padding: 5px;
    cursor: pointer;
}

html:not(.small-window) .headline:hover + .content {
    display: block;
}

.content {
    padding: 5px;
    display: none;
}

JavaScript

var isSmallWindow;
$(window).on('resize', function() {
    isSmallWindow = $(this).width() < 768;
    if(isSmallWindow) {
        $('html').addClass('small-window');
    }else {
        $('html').removeClass('small-window');
    }
});

$('.headline').on('click', function() {
    if (isSmallWindow) {
        $('.content').slideToggle(300);
    }
});