JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item-container">
    <span class="item">Quality</span>
    <span class="fill"></span>
    <span class="score">8.0</span>
</div>
<div class="item-container">
    <span class="item">Presentation</span>
    <span class="fill"></span>
    <span class="score">9.5</span>
</div>

CSS

.item-container{
    width:200px;
    /*border:1px solid #AAA;*/
    display:block;
    padding:5px;
    margin:2px;    
}

.item{
    float:left;   
    margin:2px; 
}
.score{
    float:right;
    margin:2px;
}
.fill{
    border:none;
    border-bottom:1px dotted #000;
    display:inline-block;
}

JavaScript

$('.item-container').each(function(){
    //alert($('.fill', $(this)).width());
    var item = $('.item', $(this));
    var score = $('.score', $(this));
    var itemWidth = item.width();
    var scoreWidth = score.width();
    
    var offset1 = item.offset().left;
    var offset2 = score.offset().left;
    var fillerWidth = (offset2 - offset1) - (itemWidth + scoreWidth);
    
    $('.fill', $(this)).css('width', fillerWidth + 10);
});