JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one" class="textbox">qwe qweqwe <b>werwesd ewrwer</b> fsdfdsrwe fdsfsdf erertre fsdfsdf</div>

<div id="two" class="textbox">dsgdfs dfgdsf dfgdfg dfgdfs <i>dfsgsdf</i> dfsgdfsg</div>

CSS

.textbox {			
    position: absolute;
    -webkit-user-select: text;
    width: 250px;			
    font-size: 30px;
    border: 1px solid black;
}

#one { left: 150px; top: 150px; }
#two { left: 450px; top: 250px; }

JavaScript

document.addEventListener('mousedown', mousedown, false);
document.addEventListener('mouseup', mouseup, false);

// While selecting disallow selection of other text.
function mousedown(event) {
    console.log('mousedown', event.target);			
    var current = findParentTextBox(event.target);
    var list = document.querySelectorAll('.textbox');
    for (var i = 0, textbox; textbox = list[i]; i++) {
        if (textbox != current) {
            textbox.style.webkitUserSelect = 'none';
        }
    }
}

// Once finished selecting allow all text to be selected again.
function mouseup(event) {
    console.log('mouseup', event.target);
    var list = document.querySelectorAll('.textbox');
    for (var i = 0, textbox; textbox = list[i]; i++) {
        textbox.style.webkitUserSelect = 'text';
    }
}

function findParentTextBox(node) {
    while (node != null) {
        if (node.className == 'textbox')
            return node;
        node = node.parent;
    }
    return null;
}