JSFiddle - React, Tailwind, and code Playground

HTML

<div class="overflow">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>

CSS

.overflow {
  overflow: hidden;
  width: 120px;
  position: relative;
  height: 30px;
  line-height: 30px;
  background: greenyellow;
  color: white;
  font-family: sans-serif;
}

.overflow p {
  white-space: nowrap;
  position: absolute;
  left: 0;
  margin: 0;
  -o-transition: left 2s linear;
  -webkit-transition: left 2s linear;
  transition: left 2s linear;
}

JavaScript

$('p')
  .on('mouseenter', function() {
    var $this = $(this);
    var left = -1 * $this.width() + 120;
    $this.css('left', left + 'px');
  })
  .on('mouseleave', function() {
    $(this).css('left', 0);
  });