JSFiddle - React, Tailwind, and code Playground

HTML

<div id="holder">
  <div class="menu_item">
    item1
  </div>
  <div class="menu_item">
    item2
  </div>
  <div class="menu_item">
    item3
  </div>
    <div class="menu_item">
    item4
  </div>
    <div class="menu_item">
    item5
  </div>
</div>

<div id="output"></div>

CSS

.holder {
    position:absolute;
	bottom:0px;
	display:block;
	width:100%;
	height:44px;
	overflow-x:auto;
	overflow-y: hidden;
	white-space:nowrap;
	background:transparent;
	z-index:300;
  }

  .menu_item {
    width: 78px;
    height:44px;
    display: inline-block;
    text-align:center;
    margin-right:1px;
    margin-left:1px;
    font-size: 12px !important;
    font-weight:bold;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
    background:yellow;
  }

JavaScript

var output = document.getElementById("output");

output.innerHTML = "Width: " + document.getElementById("holder").clientWidth;