JSFiddle - React, Tailwind, and code Playground

HTML

<div class="labelContainer">
  <span>The long text should scroll when user hovers on it.</span>
</div>

<div class="labelContainer">
  <span>Should Not Scroll</span>
</div>

CSS

.labelContainer {
  height: 30px;
  border: 1px solid #000;
  border-radius: 3px;
  border-radius: 3px;
  display: flex;
  width: 200px;
  overflow: hidden;
  position: relative;
  padding : 5px;
}

.labelContainer span {
  height: 30px;
  width: 200px;
  color: #000;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  transform: translateX(0);
  transition: 1s;
}

.labelContainer:hover span {
  width: auto;
  transform: translateX(calc(200px - 100%));
}