JSFiddle - React, Tailwind, and code Playground

HTML

<div class="newsticker"> 
        <div class="middle"><p><p></div>
    </div>

CSS

div.newsticker{
        border:1px solid #666666;
        width:100%;
        height:100px;
        padding: 0px;
        margin: 0px;
         overflow: hidden;
    position: relative;
    }

.newsticker p{
    padding-left:10px;
    padding-right:10px;
    line-height: 1em; 
    padding: 0px; 
    margin: 0px;
    position: relative;
    display: block;
}

.middle {position: absolute; top: 50%; padding:0; margin:0; right: -100%; opacity: 0;}

JavaScript

function transition() {
    
    $('.middle').animate({"right":"-100%","opacity":".0"}, 600, function() {
         $('.middle').first().remove();
    });
    var width = $('.newsticker').width();
        $('.newsticker').append("<div class='middle'><p style='width: " + width + "px;'>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p></div>");
        var height = $('.middle p').last().height() / 2;
        $('.middle p').css('top','-' + height + 'px');
        $('.middle').animate({"right":"0px","opacity":"1"}, 600);
}

setInterval(transition, 2000);