JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript">
	function onload() {
	  var items = document.getElementsByClassName('item');
	  var widths = 0;
	  
	  for(var i=0; i<items.length; i++) {
		items[i].className = 'item';
		widths+=items[i].offsetWidth;
	  };
	  var containerWidth = document.getElementById('container').offsetWidth;
	  
	  if(widths >= containerWidth) {
		for(var i=0; i<items.length; i++) {
			items[i].className = 'item fullitem';
		};
	  }
	}
</script>
    
<body onload='onload()' onresize='onload()'>
<div id="container">
  <div class="item">
    First item
  </div>
  <div class="item">
    Second item
  </div>
  <div class="item">
    Third item
  </div>
  <div class="item">
    Fourth item
  </div>
</div>

<span id="item_width"></span>
</body>

CSS

#container {
	  width: 50%;
	  background: grey;
	  font-size: 0;
	}

	.item {
	  font-size: 15px;
	  display: inline-block;
	  padding: 1em;
	  background: #CCCCCC;
	  white-space: nowrap;
	  overflow: hidden;
	  transition: padding 0.5s, background 0.5s;
	}

	.fullitem {
	  width: calc(100% - 2em);
	}

	.item:hover {
	  background: #DDDDDD;
	}