JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a1">
    <h1>Hello, world</h1>
</div>

<input type="button" id="a2" value="Alert div height">
<input type="button" id="a3" value="Add 1px padding">

CSS

#a1:before, #a1:after{
    content: '';
    display: table;
}

JavaScript

var hasPadding = false;

var alertDivHeightButton = document.getElementById('a2');
alertDivHeightButton.onclick = alertDivHeight;
var togglePaddingButton = document.getElementById('a3');
togglePaddingButton.onclick = togglePadding;

function alertDivHeight () {
    var div = document.getElementById('a1');
    alert("width of div: " + div.offsetHeight);
}

function togglePadding () {
    var div = document.getElementById('a1');
    if (hasPadding) {
        div.style.padding = '0px';
        togglePaddingButton.value = "Add 1px padding";
    } else {
        div.style.padding = '1px';
        togglePaddingButton.value = "Remove 1px padding";
    }
    hasPadding = !hasPadding;
}