JSFiddle - React, Tailwind, and code Playground

HTML

<div class="logs"></div> 
<div class="content" style="width:auto;border:1px solid #F00;position:absolute;top:250px;left:10px;float:left;font-size:0px;">
    <span class="nowrap">
        <span style="font:bold 14px Verdana;">test</span>
    </span> 

    <span class="nowrap delim" style="font:bold 14px Verdana;">&nbsp;</span>
    
    <span class="nowrap">  
        <span style="font:bold 24px Verdana;">new</span>
    </span>   
    
    <span class="nowrap delim" style="font:bold 14px Verdana;">&nbsp;</span>

    <span class="nowrap">        
        <span style="font:bold 30px Verdana;">reg</span>
    </span>    
    
   
      
   </div>

CSS

.nowrap{
      white-space: nowrap;
      font-size: 0;
}

JavaScript

$(function(){
    $('.nowrap').each(function(){
        // log($(this).text() + " : " + $(this).width() );
    });
    
    checkDivWithAuto();
    checkAllSpans();
})
    
function checkDivWithAuto(){
    var $el = $('.content').clone();
    var width  = $el.appendTo('body').css('width','auto').width();
    log("Auto width is " + width );
    $el.remove();
}

function checkAllSpans(){
    var spans = $('.content').find('.nowrap');
    var widths = spans.map(function(i,sp){
        return $(this).width()
    });
        console.log(widths);
    var total = Array.prototype.reduce.call(widths,function(prev,current){
        return prev+current;
    },0);
        log(" combined width of all spans " + total);
}

function log(text){
    $('.logs').append('<div>' + text + '</div');
}