JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <a class="ellipsis_cell">
        <span title="Hele lange tekst. Echt heel lang zeg">
            <span>
                Hele lange tekst. Echt heel lang zeg
            </span>
        </span>
    </a>
    <span class="nowrap">Minder hier</span>
</div>

CSS

.parent
{
	width: 100%;
    display: table;
}

.parent > a, .parent > span {
    display: table-cell;
}

.nowrap
{
	white-space: nowrap;
    text-align: right;
}


.ellipsis_cell > span
{
	position: relative;
	overflow: hidden;
    height: 1em;
    display: block;
}


/* visible content */
.ellipsis_cell > span > span
{
	display: block;
	position: absolute;	
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1em;		/* for vertical align of text */
}


/* cell stretching content */
.ellipsis_cell > span:after
{
	content: attr(title);
	overflow: hidden;
	height: 0;
	display: block;
}