JSFiddle - React, Tailwind, and code Playground

HTML

<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>
    <script>
var oneP = document.getElementById('oneP');
var twoP = document.getElementById('twoP');
var threeP = document.getElementById('threeP');
step = 1;
function expandPanel1(){
    var h = oneP.clientWidth + step;
    oneP.style.width = h+"px";
    if (h < 614 || h !=614) {
        setTimeout("expandPanel1()", 5);
    } else { oneP.style.width = 613+"px"; }
}                
function expandPanel2(){
    var h = twoP.clientWidth + step;
    twoP.style.width = h+"px";
    if (h < 614 || h !=614) {
        setTimeout("expandPanel2()", 5)
    } else { twoP.style.width = 613+"px"; }
}                
function expandPanel3(){
    var h = threeP.clientWidth + step;
    threeP.style.width = h+"px";
    if (h < 614 || h !=614) {
        setTimeout("expandPanel3()", 5)
    } else { threeP.style.width = 613+"px"; }
}    
    //---------------------------------------------
    
    function expandPanel1Minus(){
        var h = oneP.clientWidth - step;
        oneP.style.width = h+"px";
        if (h > 80 || h !=80) {
            setTimeout("expandPanel1Minus()", 5)
        } else { oneP.style.width = 81+"px"; }
    }                
    function expandPanel2Minus(){
        var h = twoP.clientWidth - step;
        twoP.style.width = h+"px";
        if (h > 80 || h !=80) {
            setTimeout("expandPanel2Minus()", 5)
        } else { twoP.style.width = 81+"px"; }
    }                
    function expandPanel3Minus(){
        var h = threeP.clientWidth - step;
        threeP.style.width = h+"px";
        if (h > 80 || h !=80) {
            setTimeout("expandPanel3Minus()", 5)
        } else { threeP.style.width = 81+"px"; }
    }
    
    //---------------------------------------------
   ...

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);
}