JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="post">
	Size: <span id="font-size">0</span><br />
	Doc height: <span id="doc_height">-</span><br /><br />
	<button onclick="change(-100);return false;">-100</button> <button onclick="change(100);return false;">+100</button><br />
	<button onclick="change(-1000);return false;">-1000</button> <button onclick="change(1000);return false;">+1000</button><br />
	<button onclick="change(-10000);return false;">-10k</button> <button onclick="change(10000);return false;">+10k</button><br />
	<button onclick="change(-100000);return false;">-100k</button> <button onclick="change(100000);return false;">+100k</button><br />
	
	<div id="text" style="position:absolute;font-size:10px;top:200px; ">1</div>
</form>

CSS

button{width:50px;}

JavaScript

//init
var size = 1000;
document.getElementById('text').style.fontSize = size + "px";
document.getElementById('font-size').innerHTML = document.getElementById('text').style.fontSize;

function change(diff){
	document.getElementById('text').style.fontSize = (size + diff) + "px";
	document.getElementById('font-size').innerHTML = document.getElementById('text').style.fontSize;
	
	//detect doc size
	var body = document.body, html = document.documentElement;
	var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
	
	document.getElementById('doc_height').innerHTML = height;
	size = size + diff;
	}