JSFiddle - React, Tailwind, and code Playground

IE9

by chrischilcoat

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.css">
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>
<div class="ui-yakabox-media-uploads" style="max-width:600px;
margin:auto;"> 

  
  <div class="text-left" style="">
    <button class="btn btn-default">
      <span class="fa fa-file"></span> Select Files
    </button>
  </div>
  <hr/>
  <div class="media"> 
    <div class="media-left media-middle"> 
      <span class="btn btn-link" title="Refresh Upload">
        <span class="fa fa-circle-o-notch fa-spin"></span>
      </span>
    </div> 
    <div class="media-body media-middle bg-danger text-danger"> 
      <div class="ui-media-parent">
        <div class="ui-media-description">
          <span class="ui-media-text">
            <span class="fa fa-file-video-o"></span> Name_of_the_document_long_document_that_wraps.mov
          </span>
        </div>
        <div class="ui-media-percent text-right">
          Error!
        </div>
      </div>
    </div> 
    <div class="media-right media-middle">  
      <button class="btn btn-link">
        <span class="fa fa-close" title="Cancel Upload"></span>
      </button>
    </div> 
  </div>
  <div class="media"> 
    <div class="media-left media-middle"> 
      <span class="fa fa-check" title="Upload Complete"></span>
    </div> 
    <div class="media-body media-middle bg-success text-success"> 
      <div class="ui-media-parent">
        <div...

SCSS

.ui-yakabox-media-uploads{
  padding:10px;
  .media {
    background-color:#f3f3f3;
    .media-left {
      padding-right:0;
      .btn {
        min-width:38px;
      }
      .fa-check {
        padding: 6px 12px;
        color: green;
      }
    }
    .media-body {
      border-right:2px solid white;
      border-left:2px solid white;
      position:relative;
      padding-right:10px;
      padding-left:10px;
      .ui-media-parent {
        position:absolute;
        right:10px;
        left:10px;
        top:7px;
        display: flex;
        justify-content: space-between;
        .ui-media-description {
          width: calc(100% - 50px);
          display: flex;
          .ui-media-text {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .ui-media-size {
            display: inline-block;
            width:90px;
            padding-left:5px;
          }
        }
        .ui-media-percent {
          width: 50px;
        }
      }
      .progress {
        position:absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
        border-radius:0;
        height:auto;
        margin:0;
        background:transparent;
        box-shadow:none;
        opacity:.2;
      }
    }
    .media-right {
      padding-left:0;
    }
  }
}