JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fileName"><span>This is the big name of my file.txt</span><span>This is the big name of my file.txt</span>
</div>

CSS

#fileName span {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}

#fileName span:first-child {
  width: 100px;
  text-overflow: ellipsis;
}

#fileName span + span {
  width: 1px;
  direction: rtl;
  text-align: right;
  text-overflow: ellipsis;
}