JSFiddle - React, Tailwind, and code Playground

HTML

<body id="cuerpo">
            <fieldset class="claseF"><legend>MOVER</legend>
                <input type="button" class="btn" id="btncomenzar" value="Comenzar" onclick="comenzar(0)">
                Parar en:<input type="text" id="texto"> 
                <br>Posicion actual:<input id="info" type="text">
            </fieldset>
        <div id="cuadro" onclick="detener()"></div>
    </body>
    
    <script src="codigoJS.js"></script>

CSS

#cuadro{
                background-color: #AEE25A;
                position:absolute; left:1px; top:100px;
                width:110px;height:553px;
            }
            .btn{
                background-color: #687275;     
            }
            .claseF{
                 width:550px;height:50px;
                 background-color: #A2C9D1;
            }
            #texto{
                position: absolute;
                left: 165px;
            }
            #info{
                  position: absolute;
                  left: 127px;
            }

JavaScript

var mover;
        function comenzar(posicion) {
        posicion = posicion + 1;
        
        document.getElementById("btncomenzar").value = "Reiniciar";
        document.getElementById("btncomenzar").disabled=true;
        document.getElementById("cuadro").style.left = posicion + "px";
        var texto1=document.getElementById("texto");
        if (posicion != texto1.value && posicion != 1252){
            mover = setTimeout("comenzar("+ posicion +")", 0.01);
            document.getElementById("info").value=document.getElementById("cuadro").offsetLeft+=1;
            

            }
      }
        function detener() {
            clearTimeout(mover);
            document.getElementById("btncomenzar").value = "Reiniciar";
            document.getElementById("btncomenzar").disabled=false;
        }