I have encountered an issue with creating a match list using li and ul tags. Despite applying the center span to a fixed width and the team spans to the remaining space, the widths still appear different. How can I ensure that the team spans have the same width and the time span is always centered?
.matches {
width: 100%;
}
.match-list {
padding: 0px;
display: block;
list-style-type: disc;
}
.list-item {
list-style: none;
margin-bottom: 10px;
display:flex;
direction:row;
border-bottom: 1px dotted #DDDDDD;
padding-bottom: 10px;
}
.list-item .image-col {
order:1;
width: 50px;
float: left;
}
.list-item .empty-col {
order:5;
width: 50px;
text-align: right;
float: left;
}
.list-item .time-col {
order:3;
width: 50px;
text-align: center;
float: left;
}
.list-item .first-team {
order:1;
flex-grow:2;
text-align: right;
float: left;
background-color: #343533;
}
.list-item .second-team {
order:4;
flex-grow:2;
float: left;
text-align: left;
background-color: #444444;
}<div class="matches">
<ul class="match-list">
<li class="list-item">
<span class="image-col">img</span>
<span class="first-team">First team teeest</span>
<span class="time-col">12:00</span>
<span class="second-team">Second team</span>
<span class="empty-col">lol</span>
</li>
<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">lol</span>
</li>
</ul>
</div>