JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Content</h1>

<div id="me">Content
    <br>
    <br>
    <br>That has some size to it</div>

CSS

#me {
    position: relative;
    width: 200px;
    margin: 50px auto;
    background: orange;
}

JavaScript

var me = $('#me');
var clone = me.clone();
clone.css({position: 'absolute', width: me.width(), height: me.height()}).css(me.position());
clone.text("This is the clone!");
clone.insertAfter(me);
clone.css({opacity: 0.5, background: 'rgb(80, 60, 300)', margin: 0});

var meofs = me.offset(), cloneofs = clone.offset();
console.log(meofs, cloneofs);
var adj = { left: meofs.left - cloneofs.left, top: meofs.top - cloneofs.top };
clone.css({left: cloneofs.left + adj.left, top: cloneofs.top + adj.top});
meofs = me.offset(), cloneofs = clone.offset();
console.log(meofs, cloneofs);