JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  <span class="left">Hello Hello Hello</span>
  <span class="right">xhaha</span>
</p>

CSS

p{
  width: 40%;
  margin: 20px auto;
  font-size: 50px;
}
span{
  display: inline-block;
}
.left{
  width:40%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.right{
  /* overflow: hidden; */
}