JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="list">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
  </div>
</div>

<div id="msg">
</div>
</div>

CSS

body {
  padding: 0;
  margin: 0;
}

.container {
  width: 600px;
  backround: #E1BEE7;
}

.list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 120px;
  background: #FFCDD2;
}

.box {
  margin: 10px;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: auto;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background: #F44336;
  color: #FFF;
  font-size: 2rem;
}

.result {
  padding: 1rem;
}

JavaScript

var totalWidth = 0;

var cont = document.getElementsByClassName('box');
for (var i = 0, len = cont.length; i < len; i++) {
    totalWidth += cont[i].offsetWidth;
}

document.getElementById('msg').innerHTML = "<p>totalWidth: " + totalWidth + "</p>";