JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="div5"></div>
</div>

CSS

div#wrapper > div {
    float: left;
    height: 200px;
    border: 1px solid blue;
}

div#wrapper {
    overflow: hidden;
    border: 1px solid red;
    width: auto;
}

div#div1 {width: 80px;}
div#div2 {width: 40px;}
div#div3 {width: 50px;}
div#div4 {width: 70px;}
div#div5 {width: 80px;}

JavaScript

var totalWidth = 0;
$("div#wrapper > div").each(function(index) {
    totalWidth += parseInt($(this).outerWidth(true), 10);
});


$("div#wrapper").width(totalWidth);