JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<div id="container">
    <div id="holder">
        <div id="green"></div>
        <div id="orange"></div>
        <div id="blue"></div>
        <div id="purple"></div>
        <div id="red"></div>
    </div>
</div>

CSS

#container {
    border: 1px solid #ddd;
    height: 140px;
    width: 220px;
}

#holder div {
    float: left;
    height: 140px;
    width: 220px;
}

#green {
    background: #ae8;
}
#orange{
    background: #eb7;
}
#blue{
    background: #8ae;
}
#purple{
    background: #c68;
}
#red{
    background: #f77;
}

JavaScript

var container = document.getElementById('container'),
    holder = document.getElementById('holder'),
    children = holder.getElementsByTagName('div').length;

holder.style.width = children * container.offsetWidth + 'px';