JSFiddle - React, Tailwind, and code Playground

HTML

<div id="#content">
    <p>
        Lorem ipsum dolor <span class="selection"><span rel="previous" class="caret"></span>sit amet, consectetur<span rel="next" class="caret"></span></span> adipiscing elit.
    </p>
</div>

CSS

span.selection {
    position: relative;
    background-color: #3399FF;
    color: #FFF;
}
    span.selection span.caret {
        position: absolute;
        border: 1px solid red;
        width: 8px;
        top: 4px;
        height: 100%;
        background-color: red;
        border-radius: 3px;
        cursor: pointer;
        z-index: 1000;
    }
        span.selection span.caret:first-child {
            left: -10px;
        }

JavaScript

$("span.caret").click(function(e) {
    var $currentCaret = $(this),
        action = $currentCaret.attr("rel");
    
    if (action === "previous") {
        //TODO: Wrap the previous word inside .selection
    } else if (action === "next") {
        //TODO: Wrap the next following word inside .selection
    }
});