JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ts_designer">
    <div id="container-testset-name" class="c-group-inner-row">
        <span>Testset name:</span>
        <span id="ts_name">
WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW
        </span>
</div>

CSS

div#ts_designer
{
    position:static;
    hieght:20px;
    width:837px;
    background-color:red;
    display:block;
}
div#container-testset-name
{
    top: 0;
    height: 20px;
    display:block;
}

div.c-group-inner-row 
{
    position: absolute;
    left: 0;
    right: 0;
}

div#ts_designer>div#container-testset-name.c-group-inner-row>span {
position: static;
width: 100px;
}

div#ts_designer>div#container-testset-name.c-group-inner-row span#ts_name 
{
    position: absolute;
    left: 100px;
    right: 0;
    top: 0px;
    bottom: 0;
    width: auto!important;
    white-space: nowrap;
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
}

JavaScript

$.fn.textWidth = function(){
          var html_org = $(this).html();
          var html_calc = '<span>' + html_org + '</span>';
          $(html_calc).css('font-size', this.css('font-size'));
          $(this).html(html_calc);
          var width = $(this).find('span:first').width();
          $(this).html(html_org);
          return width;
        };

        var ts_name = $('span#ts_name');
        var text_width = $(ts_name).textWidth();

        console.log(text_width);