JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
<span class="genre">Adventure</span>
<span class="operator">OR</span>
<span class="genre"> Comedy</span>
</div>

CSS

.outer {
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    text-overflow: ellipsis;
}


.operator {
  width: 20px;
  height: 22px;
  float: left;
}
.genre {
  float: left
}