JSFiddle - React, Tailwind, and code Playground

HTML

How to make .collection to have the minimum with as it's `li` parrent?
<ul>
  <li>
    <a href="">SERVICEUSER</a>
    <div class="collection">
      <div class="item">Item-1</div>
      <div class="item">Item-2</div>
      <div class="item">Item-3</div>
    </div>
  </li>
</ul>

CSS

ul { list-style-type: none; }

li { display: inline; }

a { background: green; }

.collection {
  position: absolute; // this is necessary for the situation
  background: white;
  white-space: nowrap;
}

.item {
  background: red;
}