JSFiddle - React, Tailwind, and code Playground

HTML

<div id=items class="items">
  <div class="item">one</div>
  <div class="item">two</div>
  <div class="item">three</div>
</div>
<button onclick="addItem()">New</button>

CSS

.items {
  display: flex;
  flex-direction: row;
  overflow: auto;
}

.item {
  width: 300px;
  height: 100px;
  margin: 5px;
  border: 1px solid #000;
  min-width: 100px;
}

JavaScript

function addItem() {
  var div = document.createElement('div');
  div.className = "item";
  items.appendChild(div);
}

function addWidth(e) {
  e.target.style.width = e.target.getBoundingClientRect().width + 100 + 'px';
  console.log(Math.trunc(e.target.getBoundingClientRect().width),
    e.target.style.width);
}

window.onload = function() {
  [...document.querySelectorAll('.item')].forEach(v => {
    v.addEventListener('click', addWidth);
  })
}