JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li>The lazy dog.<span>&nbsp;</span></li>
<li>The lazy cat.<span>AND</span></li>
<li>The active goldfish.<span>OR</span></li>
</ul>

CSS

ul {
  border: .1rem solid #e1e1e1;
  max-width: 120px;
  text-overflow: ellipsis;
}

ul li span { 
	float: right;
	width: 40px;
}

ul li { 
	border-bottom: .1rem solid #e1e1e1;
  white-space: nowrap;
  overflow: hidden;
}