JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <div class="headline">Headline 1</div>
        <div class="date">Date 1</div>
    </li>
    <li>
        <div class="headline">Headline 2 with a longer string</div>
        <div class="date">Date 2</div>
    </li>
    <li>
        <div class="headline">Headline 3 with a medium string</div>
        <div class="date">Date 3</div>
    </li>
</ul>

CSS

li {
    width: 140px;
    display: block;
}

div {
    float: left;
}

JavaScript

$('li').each(function() {
        var listWidth = $(this).outerWidth(),
            headLine = $(this).find('.headline'),
            dateLine = $(this).find('.date'),
            headlineWidth = headLine.outerWidth(),
            dateWidth = dateLine.outerWidth(),
            contentWidth = headlineWidth + dateWidth;
        
        var html = headLine.html();
        for (var i = html.length-1; i >= 0; i--) {
            if (contentWidth >= listWidth) {
                headLine.html(html.substr(0, i));
                headlineWidth = headLine.outerWidth();
                dateWidth = dateLine.outerWidth();
                contentWidth = headlineWidth + dateWidth;
            }
            else {
                break;
            }
        }
    });