How to align second column in two-column layout?

Issue

I have an unordered list which contains working hours information. It looks like that :

Below is the code of my list :

<ul class="list-unstyled margin-bottom-30" >
     <li><strong>Lundi au Vendredi :</strong>  08h30 - 12h00 <br> 
         <strong style="visibility:hidden">Lundi au Vendredi :</strong> 13h00 - 17h30</li>
      <li><strong>Samedi :</strong><span style="width:25px">&nbsp;</span>09h00 - 12h00</li>
      <li><strong>Dimanche :</strong> Fermé</li>
 </ul>

What I want to do is to put time aligned to time, and for that I tried to use the CSS property display: flex; justify-content: space-between.

The result is not really what I expect :

I could give each object a percentage left position, or use some table or a common left percentage margin but I guess this is not the best way to do.

So the question is, is there a way to do that using the CSS property flex?

If yes, what am I doing wrong ? Previously it was inside the class of my ul.

What I would like to have is :

Solution

You can use CSS tables here

ul {
  display: table;
  padding: 0;
}
li {
  display: table-row;
}
strong {
  display: table-cell;
}

<ul class="list-unstyled margin-bottom-30">
  <li><strong>Lundi au Vendredi: </strong> 08h30 - 12h00 <br> 13h00 - 17h30</li>
  <li><strong>Samedi: </strong><span style="width:25px"></span>09h00 - 12h00</li>
  <li><strong>Dimanche: </strong> Fermé</li>
</ul>

Edit: For that hidden field use display: none to remove it from elements flow DEMO

Answered By - Nenad Vracar