JSFiddle - React, Tailwind, and code Playground

HTML

<div id=rel>
Hello
</div>
bottom and right should be negative
<br>
<div id="target"></div>

CSS

#rel {
  position: relative;
  background-color: red;
  left: 5px;
  right: 5px;
  top: 5px;
  bottom: 5px;
}
#pos {
    position: absolute;
    background-color: green;
    width: 175px;
}

JavaScript

var pos = document.getElementById("rel");
for (var side of 'top left bottom right'.split(' ')) {
  target.textContent += getComputedStyle(pos)[side] + ' ';
}