JSFiddle - React, Tailwind, and code Playground

HTML

<p id="log" style="font-weight: bold">Selection:</p>
<p>
Bacon ipsum dolor sit amet jerky capicola beef hamburger, cow salami pork. Flank pork tenderloin frankfurter short ribs. Bresaola salami pig, turducken sirloin strip steak beef tenderloin. Hamburger tail cow, pork pancetta prosciutto strip steak jowl. Pastrami pork beef ribs, fatback shoulder pork chop kielbasa pig venison.
</p>
<p>
Chicken jowl short ribs rump, chuck beef ribs ham corned beef meatball strip steak pork chop turkey. Ball tip salami chuck, drumstick biltong t-bone corned beef prosciutto beef flank shoulder shank pastrami beef ribs rump. Short ribs hamburger shoulder pig tri-tip flank. Beef ribs hamburger bresaola biltong t-bone shank. Turducken filet mignon chicken pork beef ribs ground round, sirloin shoulder flank chuck short ribs ball tip pancetta pork chop. Fatback bacon andouille, leberkas boudin tenderloin salami pastrami kielbasa pork loin shank frankfurter. Pig tail sausage, chuck meatloaf ground round pastrami frankfurter filet mignon rump hamburger turkey.
</p>
<p>
Boudin meatloaf pork belly chuck turducken bresaola flank short ribs swine ham. Tongue pork loin meatloaf strip steak sausage. Short ribs frankfurter pastrami short loin, biltong flank jerky bresaola drumstick venison shoulder shankle tenderloin sausage fatback. Venison hamburger andouille prosciutto, leberkas short ribs drumstick jerky fatback shankle swine meatloaf rump spare ribs salami. Meatloaf strip steak spare ribs ham hock pancetta shoulder.
</p>

CSS

p {
    margin-bottom: 2em;
}

JavaScript

function getSelectionDimensions() {
    var sel = document.selection, range;
    var width = 0, height = 0;
    if (sel) {
        if (sel.type != "Control") {
            range = sel.createRange();
            width = range.boundingWidth;
            height = range.boundingHeight;
        }
    } else if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0).cloneRange();
            if (range.getBoundingClientRect) {
                var rect = range.getBoundingClientRect();
                width = rect.right - rect.left;
                height = rect.bottom - rect.top;
            }
        }
    }
    return { width: width , height: height };
}

document.onmouseup = function() {
    var selDimensions = getSelectionDimensions();
    document.getElementById("log").innerHTML = "Selection width: " + selDimensions.width + ", height: " + selDimensions.height;
};