JSFiddle - React, Tailwind, and code Playground

HTML

<div class='progress'>
    <div class='progresstop'></div>
    <div class='arrow-right'></div>
    <div class='filename'> FILENAME </div>
</div>

CSS

.progress {
  height: 14px;
  width: 300px;
  background: #111;
  border-radius: 5px;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
  color: white;        
}

.filename {
  font-size: 10px;
  color: white;
  position: relative;
}

.progresstop {  
  padding: 4px;
  width: 40px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px; 
  height: 8px;
  float: left;
  background: #c44639;
  vertical-align: middle;
  display: inline-block;
}

.arrow-right {
  width: 0px;
  height: 0px;
  border-style: solid;
  background: #111;
  border-width: 7px 7px 7px ;
  border-color: transparent transparent transparent #c44639;
  float: left;
  display: inline-block;
}

JavaScript

$(document).ready(function() {
    $('.progress').click(function() {
        $(this).children('.progresstop').animate({
            width: '300px'
        }, 8000, function() {} )
    })
})