JSFiddle - React, Tailwind, and code Playground

by Bart Kalisz

HTML

<div class="client-name">
  <span>Henryk</span>
  <span>Ciposzewski</span>
</div>

SCSS

.client-name {
  flex: 1 1 auto;
  display: grid;
  grid: 1fr / minmax(2em, max-content) max-content 0.1fr;
  font-size: 4rem;

  & > span ~ span::before {
    content: "\00a0";
  }

  & > span:first-of-type {
    grid-column: 1 / 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  & > span:last-of-type {
    grid-column: 2 / 3;
  }
}