Fill remaining horizontal width without a fixed width

Question

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.

Answer 1

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>