JSFiddle - React, Tailwind, and code Playground

HTML

<div  class="filelist">
  <div  class="bem-file bem-file-error">
    <div  class="bem-left-side">
      <span  class="alert-icon"></span> 
      <div  class="bem-file-name">ripgrep-0.5.2-x86_64-apple-darwin.tar</div>
    </div>
    <div  class="bem-right-side">
      <span  class="status-message">File type invalid</span>
      <span  class="bem-upload-progress"></span>
      <span  aria-label="Remove" class="bem-remove-file bem-remove-file-error"></span>
    </div>
  </div>
</div>

CSS

.filelist {
  width: 500px;
}

* {
    box-sizing: border-box;
}

.bem-file {
    height: 37px;
}

.bem-left-side {
    width: 300px;
    display: inline-block;
}

.bem-right-side {
    width: 200px;
    display: inline-block;
}
.bem-file-name {
    display: inline;
}
.bem-upload-progress {

}

.alert-icon {
  color: red;
}

/* wuh? this is \e999 in the global icon demo. Did we get an old version? */
.alert-icon:before {
  content: "\e99b";
  color: #d37d7d;
}