JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div id="foo" class="foo">foo</div>
<div id="bar" class="bar">bar</div>

CSS

.foo {
  background: pink;
  width: 100px;
  height: 50px;
}

.bar {
  background: green;
  width: 74px;
  height: 40px;
  position: relative;
  left: 200px;
  top: 100px;
}

JavaScript

let fooBB = foo.getBoundingClientRect();
let barBB = bar.getBoundingClientRect();

let xdiff = fooBB.x - barBB.x;
let ydiff = fooBB.y - barBB.y;
let sx = fooBB.width / barBB.width;
let sy = fooBB.height / barBB.height;

bar.style.transformOrigin = 'left top';
bar.style.transform = `translate(${xdiff}px, ${ydiff}px) scale(${sx}, ${sy})`;