JSFiddle - React, Tailwind, and code Playground

HTML

<div class="texto">PALAVRA</div>
<div class="barra" style="display:none"></div>

<div class="texto">OUTRA PALAVRA MAIS COMPRIDA</div>
<div class="barra" style="display:none"></div>

CSS

div {
    border: 1px solid #ccf;
    height: 20px;
    float: left;
    clear: both;
}

JavaScript

$(".texto").hover(function () {
    var $this = $(this);
    var largura = $this.width();
    $(this).next().css({
        'display': 'block',
            'width': largura + 'px'
    });
}, function () {
    $(this).next().css('display', 'none');
});