JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scroll-box">
    <div class="scroll-text">This is the text that is too long to fit in the box</div>
</div>

CSS

.scroll-box {
    width: 100px;
    height: 1.2em;
    overflow: hidden;
    position: relative;
}
.scroll-text {
    position: absolute;
    white-space: nowrap;
}

JavaScript

$(document).ready(function () {

	    var startAni = function () {
	        var elem = $('.scroll-box');
	        var boxWidth = elem.width();
	        var textWidth = $('.scroll-text', elem).width();
	        if (textWidth > boxWidth) {
	            var animSpeed = textWidth * 10;
	            elem.animate({
	                scrollLeft: (textWidth - boxWidth)
	            }, animSpeed, function () {
	                elem.animate({
	                    scrollLeft: 0
	                }, animSpeed, function () {
	                    startAni();
	                });
	            });
	        }
	    }

	    startAni();

	});