Q:

Fill remaining horizontal width without a fixed width

I'm trying to float two elements and make the second element fill the remaining width space using only CSS, but the more answers & research I do looks like I might need to use JS. 
I'm trying to float text with a variable width next to span which I want to fill the remaining space. 

ul#filter-list {
  list-style: none;
  padding-left: 0px;
}
ul#filter-list span {
  font-size: 14px;
  float: l margin: 0px 5px;
}
span.filter-pill {
  border-radius: 4px;
  width: 100%;
  margin-left: 12px;
  height: 10px;
  display: inline-block;
}
<ul id="filter-list">
  <li>
    <a href="{{ route('question.index') }}">
      <span>All</span>
      <span style="background: #5fbeaa" class="filter-pill"></span>
    </a>
  </li>
  <li>
    <a href="{{ route('question.index') }}">
      <span>a big filter name here</span>
      <span style="background: #5fbeaa" class="filter-pill"></span>
    </a>
  </li>
</ul>

JSFiddle - https://jsfiddle.net/1466qdab/
Note with the width set to 100% it falls to the line under. 

A:

If you're willing to use flexbox, it can be pretty easy:
ul#filter-list a {
  display: flex;
}

In addition, use align-items: center; for centering vertically.

ul#filter-list {
  list-style: none;
  padding-left: 0px;
}
ul#filter-list a {
  display: flex; /*added*/
  align-items: center; /*added*/
}
ul#filter-list span {
  font-size: 14px;
  margin: 0px 5px;
}
span.filter-pill {
  flex: 1; /*added*/
  border-radius: 4px;
  margin-left: 12px;
  height: 10px;
}
<ul id="filter-list">
  <li>
    <a href="{{ route('question.index') }}">
      <span>All</span>
      <span style="background: #5fbeaa" class="filter-pill"></span>
    </a>
  </li>
  <li>
    <a href="{{ route('question.index') }}">
      <span>a big filter name here</span>
      <span style="background: #5fbeaa" class="filter-pill"></span>
    </a>
  </li>
</ul>

