JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    Big text is here and will wrap because of its defined width
    <span id="inner">
        Smaller text will be truncated because it is too long
    </span>
</div>

CSS

#outer{
    font-size: 25px;
    width: 400px;
}
#inner{
    width: 0px;
    font-size: 16px;
    color: grey;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

JavaScript

var oldWidth = $('#outer').width();
var newWidth = oldWidth - $('#inner').position().left;
$('#inner').css('width', newWidth + 'px');