JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li style="left:0;" />
    <li style="left:33.3%;" />
    <li style="right:0;" />
</ul>

CSS

#menu{
    width: 100%;
    position:relative;
}

#menu li{
    position:absolute;
    top:0;
    height: 200px;
    background: #ccc;
    width:32%;
    margin-right:1.33%;
}

JavaScript

var timeAnim = 300,
    leftSecond = 33.3,
    origW = 32,
    maxW = 42,
    leftSecondMax = maxW-origW+leftSecond,
    minW = origW*2-maxW;
    
    
$("#menu li").eq(0).hover(
    function(){
        $(this).next().animate({width: minW+"%", left: leftSecondMax+'%'}, timeAnim);
        $(this).animate({width: maxW+"%"}, timeAnim);
    },
    function(){
        $(this).next().animate({width: origW+"%", left: leftSecond+'%'}, timeAnim);
        $(this).animate({width: origW+"%"}, timeAnim);
    }
);        

    

$("#menu li").eq(1).hover(
    function(){
        $(this).next().animate({width: minW+"%"}, timeAnim);
        $(this).animate({width: maxW+"%"}, timeAnim);
    },
    function(){
        $(this).next().animate({width: origW+"%"}, timeAnim);
        $(this).animate({width: origW+"%"}, timeAnim);
    }
);


$("#menu li").eq(2).hover(
    function(){
        $(this).prev().animate({width: minW+"%"}, timeAnim);
        $(this).animate({width: maxW+"%"}, timeAnim);
    },
    function(){
        $(this).prev().animate({width: origW+"%"}, timeAnim);
        $(this).animate({width: origW+"%"}, timeAnim);
    }
);