JSFiddle - React, Tailwind, and code Playground

HTML

<div id="elementID">
    Some content
</div>
<ul>
    <li id="x"></li>
    <li id="y"></li>
    <li id="h"></li>
    <li id="w"></li>
</ul>

CSS

#elementID {
    width: 5em;
    height: 3em;
    margin: 0 auto;
}

JavaScript

$(document).ready(
    function(){
        $('#elementID').click(
            function(){
                var position = $('#elementID').offset(),
                xPos = position.left,
                yPos = position.top,
                width = $('#elementID').width(); // or $('#element').outerWidth(),
                height = $('#elementID').height();
                $('#x').text('xPos: ' + xPos);
                $('#y').text('yPos: ' + yPos);
                $('#h').text('Height: ' + height);
                $('#w').text('Width: ' + width);
            });
    }
);