JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box1">
    <div id="box2"></div>
</div>

CSS

#box1 {
        width: 900px;
        height: 50px;
        background-color: #000;
        position: relative;
    }

    #box2 {
        width: 50px;
        height: 50px;
        background-color: #a00;
        position: absolute;
    }

JavaScript

var tick = 20;
var newLeft=0;

var box2 = document.getElementById("box2");
var remove = setInterval(function() {
    box2.style.left = "0px";
    
 var now, before = new Date();
    var move = setInterval(function() {
        now = new Date();
        var elapsedTime = (now.getTime() - before.getTime());
        if (elapsedTime > tick) {
            console.log((Math.floor(elapsedTime / tick) * 5));
            newLeft = Math.min(parseInt(box2.style.left) + (Math.floor(elapsedTime / tick) * 5), 850) + "px";
        }
        else {
            newLeft = Math.min(parseInt(box2.style.left) + 5, 850) + "px";
        }
        box2.style.left = newLeft;
        before = new Date();
        if (newLeft == "850px"){clearInterval(move);}
    }, tick);
    
}, 5000);