Set one span fixed width and other rest width - html

Question

I'm creating a match list using ul and li tags. However i want to set some spans to a fixed width and then apply rest of the spans to the equal rest width. In my example there are 3 spans with a width 10px. I want the first team and second team classes to fill the rest of the width how can i do this using percentages?
.match-list {
padding: 0;
list-style-type: none;
}
.list-item {
list-style: none;
margin-bottom: 9px;
}
.list-item .image-col {
width: 50px;
float: left;
}
.list-item .empty-col {
width: 50px;
text-align: right;
float: left;
}
.list-item .time-col {
width: 50px;
text-align: center;
float: left;
}
.list-item .first-team {
text-align: right;
float: left;
}
.list-item .second-team {
float: left;
text-align: left;
}
<div>
<ul class="match-list">
<li class="list-item">
<span class="image-col">img</span>
<span class="first-team">First team</span>
<span class="time-col">12:00</span>
<span class="second-team">Second team</span>
<span class="empty-col">empty</span>
</li>
</ul>
</div>

Answer 1

You could use flexbox
CSS
.list-item {
list-style: none;
margin-bottom: 9px;
display:flex;
direction:row;
}
.list-item .first-team {
order:1;
flex-grow:2;
text-align: right;
float: left;
background:#d7d7d7;
text-align:center;
}
.list-item .second-team {
order:2;
flex-grow:2;
float: left;
text-align: left;
background:#a7a7a7;
text-align:center;
}
Check it on Codepen

Answer 2

If you can remove those float properties, you could use some table tricks on your layout, like this:
.match-list {
padding: 0;
list-style-type: none;
}
.list-item {
list-style: none;
margin-bottom: 9px;
}
/*added stuff*/
.list-item {
display: table;
width: 100%;
}
.list-item > span {
display: table-cell;
}
.list-item .image-col {
width: 50px;
}
.list-item .empty-col {
width: 50px;
text-align: right;
}
.list-item .time-col {
width: 50px;
text-align: center;
}
.list-item .first-team {
text-align: center;
}
.list-item .second-team {
text-align: center;
}
<div>
<ul class="match-list">
<li class="list-item">
<span class="image-col">img</span>
<span class="first-team">First team</span>
<span class="time-col">12:00</span>
<span class="second-team">Second team</span>
<span class="empty-col">empty</span>
</li>
</ul>
</div>

Answer 3

you can do this with css calc():
.list-item .first-team {
width: calc(50% - 150px);
text-align: right;
float: left;
}
.list-item .second-team {
width: calc(50% - 150px);
float: left;
text-align: left;
}
example: http://jsfiddle.net/qqu2448n/