JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pictureNavContainer">

    <div class="section pictureSectionOne" id="1"></div>
    <div class="section pictureSectionTwo" id="2"></div>
    <div class="section pictureSectionThree" id="3"></div>
    
</div>

CSS

#pictureNavContainer{background-color:#262626; width:1000px; height:220px; overflow:hidden;}
.pictureSectionOne{float:left; background:yellow; height:220px; width:77px;}
.pictureSectionTwo{float:left; background:red; height:220px; width:177px;}
.pictureSectionThree{float:left; background:blue; height:220px; width:400px;}

JavaScript

$(function(){
    
    var $sections = $('.section');
    var orgWidth = [];
    
    var animate = function() {
        var $this = $(this);
        var total = 1000;
        $sections.not($this).each(function(){
            var $section = $(this),
                org = orgWidth[$section.index()];
            total -= org;
            $section.animate({
                width: org
            }, 400);
        });
        $this.animate({
            width: total
        }, 400);
    };
    
    $sections.each(function(){
        var $this = $(this);
        orgWidth.push($this.width());
        $this.click(animate);  
        console.log(orgWidth);
    });
});