JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ha2" class="box"><span>h</span><span>e</span><span>l</span><span>l</span><span>o</span><span>d</span><span>a</span><span>r</span><span>e</span></div>

<div id="ha"></div>

CSS

#ha {
    background-color: rgba(120,33,33,.3);
    width:50px;
    height:50px;
    color:black;
}
.under {
    color: red;
}
.default-span {
    color: white;
}
#ha2 {
    width:100px;
    height:100px;
    margin-left:200px;
}

#ha2 span {
    border:1px solid black;
}

#outside{
    border:1px solid black;
}

JavaScript

$(document).ready(function(){
    $(".box span").each(function(){
        $(this).addClass("default-span");
    });
});


$("#ha").draggable({
    drag: function () {
        
        $(".box span").each(function() {
            $(this).removeClass("under");
            if (!$(this).hasClass("default-span"))
            {
                $(this).addClass("default-span");
            }
            
            var posOfBox = $("#ha").position();
            var $haBox = $("#ha");
            
            
if (posOfBox.left + $haBox.width() > $(this).position().left && 
    posOfBox.left < ($(this).position().left + $(this).width()) && 
    posOfBox.top + $haBox.height() > $(this).position().top && 
    posOfBox.top < ($(this).position().top + $(this).height())) {
                $(this).removeClass("default-span");
                $(this).addClass("under");
            }
        });
    }
});