JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <br /><hr />
        <span id="hilite">
            <span id="word">football</span>
        </span>
    <hr /><br />
</div>

CSS

body {margin:25px;}
        .active {padding: 18px 0 18px 0; border:1px solid black; background-color:green; }
        #target {display: none;position: relative; top: -18px;}
#hilite { display: inline-block; }

JavaScript

$(function() {
    $('#word').draggable({
        axis: 'Y',
        containment: 'parent',
        start: function(ev, ui) {
            $("#hilite").toggleClass("active");
            //$('#target').css("display", "block");
        },
        stop: function() {
            $("#hilite").toggleClass("active");
        }
    });
});