JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <span id="firstText">This text should be effected by ellipsis</span>
    <span id="lastText">this text should not change size</span>
</div>

CSS

#firstText
{
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:150px;
    display:inline-block;
}

#lastText
{
    white-space:nowrap;
    overflow:visible;
 display:inline-block;   
}
#wrapper {
  display: inline-flex;
}