JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="go();">
<div id="promo">
    <div class="promo-item twoP wide" id="twoP">
      <div>
      </div>
    </div>
    <div class="promo-item threeP" id="threeP">
      <div>
      </div>
    </div>
    <div class="promo-item oneP" id="oneP">
      <div>
      </div>
    </div>
</div>
</body>

CSS

#promo{
    display:block;
    height: 354px;
    width: 790px;
}
.promo-item {
    width: 81px;
    height: 354px;
    float: left;
}
.promo-item.wide {
    width: 613px;
}
.threeP {
    background-color: rgb(206, 203, 203);
}
.oneP {
    background-color: rgb(241, 220, 182);
}
.twoP {
    background-color: rgb(187, 217, 226);
}

JavaScript

var f, s, t;
var which;

function go() {
    f = document.getElementById('oneP');
    s = document.getElementById('twoP');
    t = document.getElementById('threeP');

    which = s;

    f.onmouseover = function() {
        foo(this)
    };

    s.onmouseover = function() {
        foo(this)
    };

    t.onmouseover = function() {
        foo(this)
    };
}

function foo(e) {
    if (e.clientWidth < 613) {
        e.style.width = (e.clientWidth) + 10 + "px";
        which.style.width = (which.clientWidth - 10) + "px";

        setTimeout(function() {
            foo(e);
        }, 5);
    }
    else if (e.clientWidth > 613) {
        e.style.width = "613px";
        which.style.width = "81px";

        which = e;
    }
}