Stanislas Piotrowski Stanislas Piotrowski - 10 months ago 28
HTML Question

How to align second column in two-column layout?

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

enter image description here

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>

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 :

enter image description here

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

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

What I would like to have is :

enter image description here

Any kind of help will be much appreciated.


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>

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