JSFiddle - React, Tailwind, and code Playground

HTML

<div id="height"></div>
<div id="width"></div>

<br>

<div id="rem">
  rem
</div>

<div id="em">
  em
</div>

<div id="pixel">
  pixel
</div>

<div id="percent">
  percent
</div>

<div id="viewport">
  viewport
</div>

CSS

#rem {
  background-color: yellow;
  margin: 0 2rem 0 2rem;
}

#em {
  background-color: pink;
  margin: 0 2em 0 2em;
}

#pixel {
  background-color: lime;
  margin: 0 32px 0 32px;
}

#percent {
  background-color: cyan;
  margin: 0 10% 0 10%;
}

#viewport {
  background-color: grey;
  margin: 0 5vw 0 5vw;
}

JavaScript

function loop() {
	height.textContent = 'Window Height: ' + document.documentElement.clientHeight
  width.textContent = 'Window Width: ' + document.documentElement.clientWidth
	setTimeout(function() {
		loop()
	}, 100)
}

loop()