JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="text"><p id="runningP">This is a test of a test of a test of a test This is a test of a test of a test of a test </p>
 </div>
 </div>

CSS

.container {
  position: absolute;
  border: 1px solid black;
  height: 60px;
  width: 300px;
  overflow: hidden;
  display: flex;
}


.text {
  width: auto;
  font-size: 20px;
  white-space: nowrap;
  align-items: center;
  transition: margin-left 0.5s;
}

JavaScript

function runText() {
  var text_width = $('#runningP').width()/2;
  console.log(text_width)

  setInterval(function(){
    console.log("interval");
    $('.text').css({'transition':'margin-left 0.5s'});
    $('.text').css({'margin-left':'-' + text_width + 'px'});
    moveBack();
  }, 3000);

  function moveBack() {
    console.log("timeout")
    setTimeout(function(){
      $('.text').css({'transition':'none'});
      $('.text').css({'margin-left': 0});
    }, 3000);
  }
};




runText();