JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main_container">
    <div class="sub_container">
        <div class="floating">wookie1</div>
      <div class="floating">wookie2</div>
        <div class="floating">wookie3</div>
        <div class="floating">wookie4</div>
        <div class="floating">wookie5</div>
        <div class="floating">wookie6</div>
        <div class="floating">wookie7</div>
        <div class="floating">wookie8</div>
    </div>
</div>

CSS

.main_container { background: black; height: 100px; }
.sub_container { background: yellow; display: inline-block; font-size: 0; }
.floating { border: 1px #000 solid; width: 80px; padding: 10px; display: inline-block; font-size: 12px; }

JavaScript

var t = $(".sub_container").width()/$(".floating").outerWidth();
$(".sub_container").width(parseInt(t) * $(".floating").outerWidth());