JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" class="text-container">
<span>Here is the long content. Adding this makes it longer than the container.</span>
</div>

CSS

div#container {
  width: 200px;
  border: 1px solid red;
  padding: 3px;
  height: 1em;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
}

div#content {
  position: absolute;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-scroll {
  transform: translateX( calc( 200px - 100%));
  transition-duration: 2s;
}

JavaScript

var true_width = (function() {
  var $tempobj = $('.text-container').clone().contents()
    .wrap('<div id="content"/>').parent().appendTo('body').css({
      'left': '-1000px'
    });
  var result = $tempobj.width();
  $tempobj.remove();
  return result;
})();

$('.text-container').one('mouseenter', function() {

  if (true_width > $(this).width()) {
    var shift_distance = true_width - $(this).width();
    var time_normalized = parseInt(shift_distance / 100, 10) * 1000;
    $(this).contents().wrap('<div id="content">').parent().animate({
      left: -shift_distance,
      right: 0
    }, time_normalized, 'linear');
  }
});

$('.text-container').one('mouseleave', function() {
	 if (true_width > $(this).width()) {
    var shift_distance = true_width - $(this).width();
    var time_normalized = parseInt(shift_distance / 100, 10) * 1000;
    $(this).contents().wrap('<div id="content">').parent().animate({
      right: shift_distance,
      left: 0
    }, time_normalized, 'linear');
  }
})