JSFiddle - React, Tailwind, and code Playground

HTML

<div id="containersimg">
    <div id="wrapper">
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
    </div>
</div>

CSS

#wrapper {
    width: auto;
    height: 130px;
}
#containersimg {
    background-color: #bbb;
    width: 400px;
    height: 130px;
    overflow-x: scroll;
    overflow-y: hidden;
   
}
img {
    float: left;
    clear: none;
    margin: 5px;
    display: inline;
}

JavaScript

var container = document.getElementById('wrapper');
var TW=0,Width=0;      // TW=Total width of the images
for(var i=0;i<container.children.length;i++)
{
   TW=TW+container.children[i].width;
}

Width=TW/container.children.length+10;  // The 10= Margin i.e 5 *2 
var width='width:'+container.children.length*Width+'px';
document.getElementById('wrapper').setAttribute("style",width);