JSFiddle - React, Tailwind, and code Playground

HTML

<div id="upBar">Some text</div>

CSS

#upBar {
    background: #777;
}

JavaScript

$(document).ready(function () {
        doAnnimation();
        $(window).resize(function () {
            $('#upBar').off('mouseenter mouseleave', annimateNav);
            doAnnimation();
        });
    });
    
    function doAnnimation() {
        if ($(window).width() > 800) {
            $('#upBar').on('mouseenter mouseleave', annimateNav);
        } else {
            $('#upBar').off('mouseenter mouseleave', annimateNav);
        }
    }
    
    function annimateNav() {
        var height = '60px';
        if( $('#upBar').hasClass('animating') ) {
            height = '45px';
        }
        $('#upBar').toggleClass('animating').stop(true).animate({
            height: height
        }, 200);
    }