JSFiddle - React, Tailwind, and code Playground

by Tom DeBerardine

HTML

<label>Left:</label>
<input id="coords-left" />
<label>Top:</label>
<input id="coords-top" />
<br/>
<br/>
<button id="arrowR">Click me</button>
<br/>
<br/>
<div id="23" style="border: 1px solid grey; padding: 20px; margin: 15px;">Lorem ipsum dolor sit amet consecuteur...</div>
<div class="blue"></div>

CSS

button {
    padding: 10px;
    font-size: 1.2em;
}

.blue {
    position: absolute;
    left: 23px;
    top: 121px;
    background-color: blue;
    width: 10px;
    height: 10px;
}

JavaScript

$('#arrowR').click(function (e) {

    var coords = $('#23').offset();

    $('#coords-left').val(coords.left);
    $('#coords-top').val(coords.top);
});