JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id='testwrap'>
            <span id='testdiv'><br />ioefjiowejf<i>eifjief</i></span>
        </div>
        <hr />
        <div id='logdiv'></div>
    </body>
</html>

CSS

#testdiv {
    margin: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    font-size: 24pt;
}

.block #testwrap {
    display: block;
}

JavaScript

selectNodeContents("testdiv");

function selectNodeContents(elemid) {
    var r1, r2, elem, logdiv, range;
    elem = document.getElementById(elemid);
    logdiv = document.getElementById("logdiv");
    range = document.createRange ? document.createRange() : document.body.createTextRange();

    //Select Node Contents
    if (document.createRange) {
        range.selectNodeContents(elem);
    }
    else if (document.selection) {
        elem.style.display = 'block';
        range.moveToElementText(elem);
        r1 = IEsetCaretToStart(elem);
        r2 = IEsetCaretToEnd(elem);
        range.setEndPoint("StartToStart", r1);
        range.setEndPoint("EndToStart", r2);
        //elem.style.display = 'inline-block';
        //if(range.htmlText != elem.innerHTML) {
        //    range.moveStart("character",1);
        //    range.moveStart("character",-1);
        //}
    }
    //Test if selection is correct
    rangetext = document.createRange ? range.toString() : range.htmlText;
    success = rangetext == elem.innerHTML ? true : false;
    if (success) {
        logdiv.innerHTML = "<h2>Test Passed</h2>Range text:<br />" + range.htmlText.replace("<", "&lt;").replace(">", "&gt;") + "<br /><br />Element content:<br />" + elem.innerHTML.replace("<", "&lt;").replace(">", "&gt;");
    }
    else {
        logdiv.innerHTML = "<h2>Test failed</h2>Range text:<br />" + range.htmlText.replace("<", "&lt;").replace(">", "&gt;") + "<br /><br />Element content:<br />" + elem.innerHTML.replace("<", "&lt;").replace(">", "&gt;");
    }
}

function IEsetCaretToStart(elem) {
    range = document.createRange ? document.createRange() : document.body.createTextRange();

    elem.innerHTML = "<span id=\"range_marker\">&#x200b;</span>" + elem.innerHTML;
    rangemarker = document.getElementById('range_marker');
    range.moveToElementText(rangemarker);
    rangemarker.parentNode.removeChild(rangemarker);

    return range;
}

function IEsetCaretToEnd(elem) {
    range =...