JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div class="song-wrapper">
    <span>1:23</span>
    <span class="song-title">This is the song title and I want it to ellipsize if the screen shrinks</span>
    <span>4:22</span>
  </div>
</div>

SCSS

.wrapper {
  display: flex;
  align-items: center;
  
  ul {
    display: inline-block;
    list-style: none;
    flex-shrink: 0;
    
    li {
      display: inline-block;
      width: 30px;
      height:30px;
      background: red;
      margin-right: 3px;
    }
  }
  .song-wrapper {
    background: beige;
    display: flex;
    flex-grow: 1;
    
    .song-title {
      background: blue;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex-grow: 1;
    }
  }
}