JSFiddle - React, Tailwind, and code Playground

by rishul matta

HTML

<div class= "square red left margin-top-in-pixel"> </div>

<div class= "square blue right margin-top-in-rem"> </div>

<div id = "content">They look to be perfectly aligned. Wait for 5 seconds and look at blue as font size increases.<div>

CSS

.square {
  height: 50px;
  width: 50px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.left {
  float: left;
}

.right {
  float: right
}

.margin-top-in-pixel {
  margin-top: 16px;
}

.margin-top-in-rem {
  margin-top: 1rem;
}

#content {
  clear: both;
}

JavaScript

var i= -1;
 var fontSizes = [20, 25, 30, 35, 40, 45, 50]
  var interval;
 debugger;
function increaseFontSize() {
	let htmlElement = document.getElementsByTagName("html")[0];
  ++i;
  if (fontSizes[i]) {
  	htmlElement.style.fontSize = fontSizes[i] + "px";
  }
  else {
  	clearInterval(interval);
  }
}


setTimeout(function() {
	interval = setInterval(increaseFontSize, 300)
}, 5000);