JSFiddle - React, Tailwind, and code Playground

HTML

Y: <input type="text" value="50" id="top"/><br />

<input type="text" id="other" />



    <div id="element"></div>

CSS

#element {

cursor: move;

position: absolute;

top: 50px;

left: 50px;

background: red;

height:50px;

width:50px;

}

JavaScript

$(document).ready(function() {


    $("#top").keyup(function() {

        var value = $(this).val();

        $("#element").css("top", value + "px");

    }).keyup();

    $("#other").keyup(function() {

        var value = $(this).val();

        $("#element").css("top", value + "px");

    }).keyup();



    $("#element").draggable().mousemove(function() {

        var coord = $(this).position();

        $("#other").val(coord.top);

    });

    $("#other").keyup(function() {
        var value = $(this).val();
        $("#top").val(value);
    }).keyup();

    });