JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://yaronet.org/163/library/jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://yaronet.org/163/library/jquery-ui/jquery-ui.min.css">
<div class="panel bookmarks"> <div class="panel-header">Liste des sujets actifs</div> <div class="panel-content"> <div class="sources">  <div class="source" style="width: 50%;"> <span class="caption">Sujets suivis ayant de nouveaux messages :</span> <ul class="topics">  <li> <div class="topic glyph10"> <a title="Section : Languages et technologies web" class="label fresh-other" href="/board/topic/184994#post-16" data-tooltip="1">[HTML/CSS] Ellipsis en conservant du texte sur la droite</a> <span style="white-space: nowrap;" class="action"> <a class="show" href="/board/topic/184994#post-16" data-url-drop="/board/bookmark/184994/watch-0.json" data-url-peek="/board/post/184994-16.json" data-url-post="/board/post/new-184994.json">16</a> <span class="count">2</span> </span> </div> </li>  <li> <div class="topic glyph10"> <a class="label fresh-other" href="/board/topic/31356-48#post-1429" title="Section : Brocantes &amp; Magasins" data-tooltip="1">La brocante de ce week-end</a><span class="action">  <a class="show" href="/board/topic/31356-48#post-1429" data-url-drop="/board/bookmark/31356/watch-0.json" data-url-peek="/board/post/31356-1429.json" data-url-post="/board/post/new-31356.json">1429</a> <span class="count">2</span> </span> </div> </li>  <li> <div class="topic glyph10"> <a class="label fresh-other" href="/board/topic/140081-174#post-5216" title="Section : J'ai rien à dire mais j'ai envie d'en parler" data-tooltip="1">Les pires news</a><span class="action">  <a class="show" href="/board/topic/140081-174#post-5216" data-url-drop="/board/bookmark/140081/watch-0.json" data-url-peek="/board/post/140081-5216.json" data-url-post="/board/post/new-140081.json">5216</a> <span class="count">90</span> </span> </div> </li>  <li> <div class="topic glyph10"> <a class="label fresh-other"...

CSS

.topic { overflow:hidden; white-space:nowrap; }

.topic > a.label {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:70%;
    display:inline-block;
    vertical-align:top;
    transition-duration:142ms;
}

.topic span.action { white-space:nowrap; }

/* demo spécific */
div.source { float:left; }

JavaScript

$(document).ready(function(){
    var $topicLinks = $('.topic > a.label');
    var $firstTopic = $topicLinks.eq(0).parent();
    
    // init each topic links with assorted action span width
    $topicLinks.each(function(){
    	var $t = $(this); $t.data('actionWidth', $t.next().outerWidth() );
    });

    var resizeTopicLinks = (function(delay){
        var timer = false;
        return function(){
            if(timer !== false) clearTimeout(timer);
        	timer = setTimeout(function(){
            	var commonTopicWidth = $firstTopic.innerWidth() - 10;
                $topicLinks.each(function(){
                    var $t = $(this);
                    $t.css('max-width', ( commonTopicWidth - $t.data('actionWidth') ) + 'px');
                });
                
            	timer = false;
        	},delay);
        };
    })(234);
    
	$(window).on('resize',resizeTopicLinks); resizeTopicLinks();
});