JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demo">
    <div id='span1' class="menu">Span 1</div>
    <div id='span2' class="menu">Span 2</div>
    <div id='span3' class="menu">Span 3</div>
</div>
<div class="demo">
    <div><span id='span1-l'>&nbsp;</span>
    </div>
    <div><span id='span2-l'>&nbsp;</span>
    </div>
    <div><span id='span3-l'>&nbsp;</span>
    </div>
</div>

CSS

div.demo {
    display:table;
    width:100%;
}
div.demo div {
    display:table-cell;
    text-align:center;
    width: 33%;
}
.under {
    width:100px;
    height:2px;
    background-color:blue;
    margin:0px auto;
    display:block;
}

JavaScript

$(document).ready(function () {
    $('.menu').hover(function () {
        $('#' + this.id + '-l').addClass('under');
    }, function () {
        $('span').removeClass('under');
    });
});