JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slideleft">
<div class="cover">
</div>
</div>
<div class="slideright">
<div class="cover">
</div>
</div>

CSS

.slideleft,
.slideright{
    border:solid 1px green;
    width:500px;
    height:100px;
    position:relative;
    overflow:hidden;
}
.slideright{
    border:solid 1px blue;
}

.cover {
    background:gray;
    width:180px;
    height:100px;
    position:absolute;
    top:0;
}

.slideleft .cover {
    left:300px;
}

.slideright .cover {
    left:-300px;
}

/* media query */
@media screen and (max-width: 480px) {
    .slideleft .cover {
        left:180px;
    }
    
    .slideright .cover {
        left:-60px;
    }
}

JavaScript

//DOM読み込み完了時に実行（http://api.jquery.com/jQuery/#jQuery3）
$(function() {
    
    //初期ポジションを保持しておく
    //$('.slideright .cover').first().css('left');などで取ってもいい
    var rCoverPos = -300,
        lCoverPos = 300,
        animateOption = {
            queue: false,
            duration: 300
        };
       
console.log(getBrowserWidth())
    //マスオーバー時に右にスライド
    $('.slideright').hover(function() {//mouseover
        
        //画面小さかったら以下の処理をキャンセル
        if(getBrowserWidth() < 480) return;
    
        $(".cover", this).stop().animate({
            left:0
        }, animateOption);
    }, function() {//mouseout
        
        //画面小さかったら以下の処理をキャンセル
        if(getBrowserWidth() < 480) return;
        
        $(".cover", this).stop().animate({
            left:rCoverPos
        }, animateOption );
    });

    //マスオーバー時に左にスライド
    $('.slideleft').hover(function() {//mouseover

        //画面小さかったら以下の処理をキャンセル
        if(getBrowserWidth() < 480) return;
        
        $(".cover", this).stop().animate({
            left:120
        }, animateOption );
        
    }, function() {//mouseout
        
        //画面小さかったら以下の処理をキャンセル
        if(getBrowserWidth() < 480) return;
        
        $(".cover", this).stop().animate({
            left: lCoverPos
        }, animateOption );
    });

    //CSSメディアクエリを使わない場合はコメントアウトを外す
    //handleResize();

    //リサイズ時の処理
    $(window).resize(handleResize);


    function getBrowserWidth() {
        if (window.innerWidth) {
            return window.innerWidth;
        }
        else if (document.documentElement && document.documentElement.clientWidth != 0) {
            return document.documentElement.clientWidth;
        }
        else if (document.body) {
            return document.body.clientWidth;
        }
        return 0;
    }
    
    function handleResize() {
        $('.slideright .cover').css({
            left:(getBrowserWidth() < 480 ? -60 : rCoverPos)    
        });
        
        $('.slideleft .cover').css({
      ...