JSFiddle - React, Tailwind, and code Playground

HTML

<div class="entity">
    <div class="icon">
        x
    </div>
     <div class="name">
     entity entity entity entity entity entity entity entity entity entity
     </div>
    
    <div class="icon">
        y
    </div>

    <div class="icon">
        z
    </div>
</div>

CSS

.entity {
    display: inline-block;
    flex-flow: row nowrap;
    background: grey;

    height: 28px;
    align-items: center;

    
}

.icon {
    display: inline-block;
    flex: 16px;
    height: 28px;
    width: 28px;
    background: blue;
   line-height: 28px;
   text-align: center;
}

.name {
  display: inline-block;
  flex: 1 auto;
  background: red;;
  text-overflow: ellipsis;
    
}