JSFiddle - React, Tailwind, and code Playground

by the wazz

HTML

<div class="wrapper">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>

CSS

.item {
  padding: 3px;
  cursor: pointer;
  display: inline-flex;
  border: 1px solid black;
}

.item:not(:first-of-type) {
  /*margin-top: 50px;*/
  display: none;
}

.wrapper {
  width: 100px;
  height: 26px;
  border: 2px solid red;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: none;
}