JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="highlighter"></div>
    <div id="text1">Text 1</div><div id="text2">Text 2</div>
</div>

CSS

#container {
    background-color: #aaa;
    z-index: 1;
}

#highlighter {
    background-color: #ff6300;
    display: block;
    height: 50px;
    position: absolute;
    width: 200px;
    z-index: 2; 
}

#text1, #text2 {
    cursor: pointer;
    display: inline-block;
    font-size: 30px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    z-index: 3;
    position:relative;
}

#text1 {
    width: 150px;
}

#text2 {
    width: 250px;
}

JavaScript

$('#highlighter')
    .offset($('#text1').offset())
    .width($('#text1').width()
);

$('#text1, #text2').click(function(){
    $('#highlighter').animate({
        top: $(this).offset().top,
        left: $(this).offset().left,
        width: $(this).width() + "px"
    },300);
});