<style>
    div.columns {
        display:inline-block;
        -webkit-logical-height: 50px;
        -webkit-logical-width: 100px;
        -webkit-margin-before: 10px;
        -webkit-margin-after: 10px;
         padding: 5px;
        border: solid black;
        font-family: ahem;
        font-size: 25px;
        color: lightblue;
        -webkit-columns: 2;
        -webkit-column-gap: 5px;
        -webkit-column-fill: auto;
        columns: 2;
        column-gap: 5px;
        column-fill: auto;
    }

    div.marker {
        position: absolute;
        border: solid rgba(0, 0, 255, 0.5);
        -webkit-box-sizing: border-box;
    }

    input[type="range"] {
        -webkit-appearance: none;
        width: 25px;
        height: 25px;
        background-color: lightblue;
    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
    }

    .vertical { -webkit-writing-mode: vertical-lr; }
    .vertical.flipped { -webkit-writing-mode: vertical-rl; }
</style>
<p>
    The blue borders should coincide with light blue squares, like this:
    <span style="display: inline-block; background-color: lightblue; border: solid rgba(0, 0, 255, 0.5); width: 19px; height: 19px;"></span>.
    There should be none of this:
    <span style="display: inline-block; background-color: lightblue; width: 25px; height: 25px;"></span>
    or this:
    <span style="display: inline-block; border: solid rgba(0, 0, 255, 0.5); width: 19px; height: 19px;"></span>.
</p>
<div class="columns" id="t1">
    <br>x y z
</div>

<div class="columns">
    <br><span id="t2">x y z</span>
</div>

<div class="columns">
    <br><div id="t3">x y z</div>
</div>

<div class="columns">
    <br><div id="t4"><br>y z</div>
</div>

<div class="columns">
    <br><div><br><input id="t5" type="range"></div>
</div>

<div class="columns">
    <br><div><br><img id="t6" style="width: 25px; height: 25px; background-color: lightblue;"></div>
</div>
<div class="columns">
    <div id="t7" style=" margin-top: 40px; width: 25px; height: 25px; background-color: lightblue;"></div>
</div>

<div class="columns vertical" id="t8">
    <br>x y z
</div>

<div class="columns vertical">
    <br><span id="t9">x y z</span>
</div>

<div class="columns vertical">
    <br><div id="t10">x y z</div>
</div>

<div class="columns vertical">
    <br><div id="t11"><br>y z</div>
</div>

<div class="columns vertical">
    <br><div><br><input id="t12" type="range"></div>
</div>

<div class="columns vertical">
    <br><div><br><img id="t13" style="width: 25px; height: 25px; background-color: lightblue;"></div>
</div>
<div class="columns vertical">
    <div id="t14" style=" -webkit-margin-before: 40px; width: 25px; height: 25px; background-color: lightblue;"></div>
</div>


<div class="columns vertical flipped" id="t15">
    <br>x y z
</div>

<div class="columns vertical flipped">
    <br><span id="t16">x y z</span>
</div>

<div class="columns vertical flipped">
    <br><div id="t17">x y z</div>
</div>

<div class="columns vertical flipped">
    <br><div id="t18"><br>y z</div>
</div>

<div class="columns vertical flipped">
    <br><div><br><input id="t19" type="range"></div>
</div>

<div class="columns vertical flipped">
    <br><div><br><img id="t20" style="width: 25px; height: 25px; background-color: lightblue;"></div>
</div>
<div class="columns vertical flipped">
    <div id="t21" style="-webkit-margin-before: 40px; width: 25px; height: 25px; background-color: lightblue;"></div>
</div>


<script>
    function placeMarker(clientRect)
    {
        var marker = document.body.appendChild(document.createElement("div"));
        marker.className = "marker";
        marker.style.left = clientRect.left + "px";
        marker.style.top = clientRect.top + "px";
        marker.style.width = clientRect.width + "px";
        marker.style.height = clientRect.height + "px";
    }

    function placeMarkersForRange(range, startOffset)
    {
        if (startOffset === undefined)
            startOffset = 0;

        var clientRects = range.getClientRects();
        for (var i = startOffset; i < clientRects.length; ++i)
            placeMarker(clientRects[i]);
    }

    var range = document.createRange();

    var textNode = document.getElementById("t1").firstChild.nextSibling.nextSibling;
    range.setStart(textNode, 0);
    range.setEnd(textNode, 5);
    placeMarkersForRange(range);

    textNode = document.getElementById("t2").firstChild;
    range.setStart(textNode, 0);
    range.setEnd(textNode, 5);
    placeMarkersForRange(range);

    textNode = document.getElementById("t3").firstChild;
    range.setStart(textNode, 0);
    range.setEnd(textNode, 5);
    placeMarkersForRange(range);

    var block = document.getElementById("t4");
    range.selectNode(block);
    placeMarkersForRange(range, 1);

    var slider = document.getElementById("t5");
    range.selectNode(slider);
    placeMarkersForRange(range);

    var image = document.getElementById("t6");
    range.selectNode(image);
    placeMarkersForRange(range);

    var div = document.getElementById("t7");
    range.selectNode(div);
    placeMarkersForRange(div);
    
    var textNode = document.getElementById("t8").firstChild.nextSibling.nextSibling;
    range.setStart(textNode, 0);
    range.setEnd(textNode, 5);
    placeMarkersForRange(range);

    textNode = document.getElementById("t9").firstChild;
    range.setStart(textNode, 0);
    range.setEnd(textNode, 5);
    placeMarkersForRange(range);

    textNode = document.getElementById("t10").firstChild;
    range.setStart(textNode, 0);
    range.setEnd(textNode, 5);
    placeMarkersForRange(range);

    var block = document.getElementById("t11");
    range.selectNode(block);
    placeMarkersForRange(range, 1);

    var slider = document.getElementById("t12");
    range.selectNode(slider);
    placeMarkersForRange(range);

    var image = document.getElementById("t13");
    range.selectNode(image);
    placeMarkersForRange(range);

    var div = document.getElementById("t14");
    range.selectNode(div);
    placeMarkersForRange(div);
    
    var textNode = document.getElementById("t15").firstChild.nextSibling.nextSibling;
    range.setStart(textNode, 0);
    range.setEnd(textNode, 5);
    placeMarkersForRange(range);

    textNode = document.getElementById("t16").firstChild;
    range.setStart(textNode, 0);
    range.setEnd(textNode, 5);
    placeMarkersForRange(range);

    textNode = document.getElementById("t17").firstChild;
    range.setStart(textNode, 0);
    range.setEnd(textNode, 5);
    placeMarkersForRange(range);

    var block = document.getElementById("t18");
    range.selectNode(block);
    placeMarkersForRange(range, 1);

    var slider = document.getElementById("t19");
    range.selectNode(slider);
    placeMarkersForRange(range);

    var image = document.getElementById("t20");
    range.selectNode(image);
    placeMarkersForRange(range);

    var div = document.getElementById("t21");
    range.selectNode(div);
    placeMarkersForRange(div);

</script>