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="container">
			<ul>
				<li>
					<div class="topic glyph10"> <a class="label active-other" href="#">[F] Les meilleures news =&gt; L'éducation nationale</a><span> - <a class="show" href="#">132</a> (+1)</span></div>
				</li>
				<li>
					<div class="topic glyph10"> <a class="label active-other" href="#">[F] L'éducation </a><span> - <a class="show" href="#">132</a> (+1)</span></div>
				</li>
			</ul>
		</div>

CSS

.container {
				width:400px;
				border-right:	3px double black;
			}
			
			.topic > a:first-child {
				white-space:	nowrap;
				overflow:	hidden;
				text-overflow:	ellipsis;
				max-width:70%;
				display:inline-block;
			}

JavaScript

$(document).ready(function(){
				var $topicsSpan = $('.topic span');
				function resizeTopics(){
					$topicsSpan.each(function(){
						var $t = $(this);
						var $title = $t.prev();
						var $topic = $t.parent();
						$title.css({maxWidth:($topic.width() - $t.width()) + 'px'});
					});
				}
				$(window).on('resize',resizeTopics);
				$('.container').resizable({handles: 'e'}).on('resize',resizeTopics);
				resizeTopics();
			});