JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    height: <input id="height" />
    <button id="setHeight">Set Height</button>
    <button id="findMax">Find Max</button>
</div>
<div id="inner" style="width:10px"></div>

CSS

#inner {
    background: red;
}

JavaScript

inner = document.getElementById('inner');

heightInput = document.getElementById('height');

document.getElementById('findMax').onclick = function() {
    var tooBig = Math.pow(2, 53);
    for (var lower, upper = 1; setHeight(upper); upper *= 2) {
        if (upper >= tooBig) {
            alert("REALLY BIG");
            return false;
        }
        lower = upper;
    }
    while (lower <= upper) {
        var mid = Math.floor((lower + upper) / 2);
        if (setHeight(mid)) {
            if (!setHeight(mid + 1)) {
                setHeight(mid);
                alert(mid);
                return false;
            } else {
                lower = mid + 1;
            }
        } else {
            upper = mid - 1;
        }
    }
};

document.getElementById('setHeight').onclick = function() {
    setHeight(heightInput.value);
}
    
setHeight = function(height) {
    inner.style.height = height + "px";
    heightInput.value = height;
    return inner.clientHeight;
};

setHeight(200);