JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<ul id="tasklist">
    <li class="task-one-line">
        <i class="fa fa-check-circle-o"></i>
        <span class="task-desc">And a short one</span>
        <span class="task-time">00:01</span>
    </li>
    <li class="task-one-line">
        <i class="fa fa-check-circle-o"></i>
        <span class="task-desc">Here's a super long long long long long long description that might wrap onto another line</span>
        <span class="task-time">00:08</span>
    </li>
</ul>

CSS

ul {
  margin:0;
  padding: 0;
}
#tasklist{
  width: 100%;
}

  .task-one-line{
    display: flex;
    flex-direction:row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-item: baseline; /*flex-end*/
    display: -webkit-flex;
    -webkit-flex-direction:row;
    -webkit-flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    -webkit-align-item: baseline; /*flex-end*/
    border-bottom: 1px solid #d3d3d3;
    width: 100%;
  }

    .task-one-line i{
      width:1.5em;
      padding: 0.5em 0.3em 0.5em 0.3em;
      /*border: 1px solid green;*/
    }

      span.task-desc{
        flex-grow: 5;
        -webkit-flex-grow: 5;
        text-align:left;
        padding: 0.3em 0.4em 0.3em 0.4em;
        /*border: 1px solid red;*/
      }
     
      span.task-time{
        flex-grow: 1;
        -webkit-flex-grow: 1;
        flex-basis:4em;
        -webkit-flex-basis:4em;
        text-align:right;
        padding: 0.3em 0.5em 0.3em 0.5em;
        /*border: 1px solid blue  ;*/
      }