CSS text align side by side and vertical align - html

Question

I have two columns of text side by side. One is right aligned and the other is left aligned.
Here is what I have so far:
.alignleft {
float: left;
}
.alignright {
float: right;
}
.list-unstyled {
padding-left: 0;
list-style: none;
}
<ul class="store-opening-hours list-unstyled">
<li>
<div style="text-align:left;">
Monday
<span style="float:right;">9:00 AM - 5:00 PM</span>
</div>
</li>
<li></li>
<li>
<div style="text-align:left;">
Tuesday
<span style="float:right;">9:00 AM - 5:00 PM</span>
</div>
</li>
<li></li>
<li>
<div style="text-align:left;">
Wednesday
<span style="float:right;">9:00 AM - 5:00 PM</span>
</div>
</li>
<li></li>
<li>
<div style="text-align:left;">
Thursday
<span style="float:right;">8:30 AM - 11:00 AM</span>
</div>
</li>
<li>
<div style="text-align:right;">
12:30 PM - 2:00 PM
</div>
</li>
<li>
<b>
<div style="text-align:left;">
Friday
<span style="float:right;">9:00 AM - 2:30 PM</span>
</div>
</b>
</li>
<li>
<b>
<div style="text-align:right;">
6:00 PM - 9:00 PM
</div>
</b>
</li>
<li>
<div style="text-align:left;">
Saturday
<span style="float:right;">9:00 AM - 5:00 PM</span>
</div>
</li>
<li></li>
<li>
<div style="text-align:left;">
Sunday
<span style="float:right;">Closed</span>
</div>
</li>
<li></li>
</ul>
Here is the Jsfiddle link JsFiddle link.
The example above is side by side but the right align text is not vertically aligned as seen in this image:
How can I achieve this?

Answer 1

You can use table instead
<table>
<tr>
<td width="200">Monday</td>
<td>9:00AM - 5:00PM</td>
</tr>
<tr>
<td>Tuesday</td>
<td>9:00AM - 5:00PM</td>
</tr>
<tr>
<td>Wednesday</td>
<td>9:00AM - 5:00PM</td>
</tr>
<tr>
<td>Thursday</td>
<td>8:30AM - 11:00AM</td>
</tr>
<tr>
<td rowspan="2"><b>Friday</b></td>
<td><b>9:00AM - 2:30PM</b></td>
</tr>
<tr>
<td><b>6:00PM - 9:00PM</b></td>
</tr>
<tr>
<td>Saturday</td>
<td>9:00AM - 5:00PM</td>
</tr>
<tr>
<td>Sunday</td>
<td>Closed</td>
</tr>
</table>
Working Demo
<table>
<tr>
<td width="200">Monday</td>
<td>9:00AM - 5:00PM</td>
</tr>
<tr>
<td>Tuesday</td>
<td>9:00AM - 5:00PM</td>
</tr>
<tr>
<td>Wednesday</td>
<td>9:00AM - 5:00PM</td>
</tr>
<tr>
<td>Thursday</td>
<td>8:30AM - 11:00AM</td>
</tr>
<tr>
<td rowspan="2"><b>Friday</b></td>
<td><b>9:00AM - 2:30PM</b></td>
</tr>
<tr>
<td><b>6:00PM - 9:00PM</b></td>
</tr>
<tr>
<td>Saturday</td>
<td>9:00AM - 5:00PM</td>
</tr>
<tr>
<td>Sunday</td>
<td>Closed</td>
</tr>
</table>

Answer 2

How about using table as display properties?
.list-unstyled {
display: table;
padding: 0;
margin: 0;
list-style-type: none;
}
.list-unstyled li {
display: table-row;
}
.list-unstyled li .weekday {
display: table-cell;
width: 400px;
text-align: left;
vertical-align: middle;
}
.list-unstyled li .time {
display: table-cell;
width: 200px;
text-align: left;
}
<ul class="store-opening-hours list-unstyled">
<li>
<div class="weekday">
Monday</div>
<div class="time">9:00 AM - 5:00 PM
</div>
</li>
<li>
<div class="weekday">
Tuesday
</div>
<div class="time">9:00 AM - 5:00 PM
</div>
</li>
<li>
<div class="weekday">
Wednesday
</div>
<div class="time">9:00 AM - 5:00 PM</div>
</li>
<li>
<div class="weekday">
Thursday
</div>
<div class="time">8:30 AM - 11:00 AM<br>12:30 PM - 2:00 PM</div>
</li>
<li>
<div class="weekday">
<strong>Friday</strong>
</div>
<div class="time">9:00 AM - 2:30 PM<br><strong>6:00 PM - 9:00 PM</strong></div>
</li>
<li>
<div class="weekday">
Saturday
</div>
<div class="time">9:00 AM - 5:00 PM
</div>
</li>
<li>
<div class="weekday">
Sunday
</div>
<div class="time">Closed
</div>
</li>
</ul>

Answer 3

Maybe you could do this by adding span class to the timing and days. These spans have a fixed width so that the text aligned.
<ul class="store-opening-hours list-unstyled">
<li>
<div>
<span class="days">Monday</span>
<span class="timings">9:00 AM - 5:00 PM</span>
</div>
</li>
<li>
<div>
<span class="days">Tuesday</span>
<span class="timings">9:00 AM - 5:00 PM</span>
</div>
</li>
<li>
<div>
<span class="days">Wednesday</span>
<span class="timings">9:00 AM - 5:00 PM</span>
</div>
</li>
<li>
<div>
<span class="days">Thursday</span>
<span class="timings">8:30 AM - 11:00 AM</span>
</div>
</li>
<li>
<div>
<span class="days"><br></span>
<span class="timings">12:30 PM - 2:00 PM</span>
</div>
</li>
<li>
<b>
<div>
<span class="days">Friday</span>
<span class="timings">9:00 AM - 2:30 PM</span>
</div>
</b>
</li>
<li>
<b>
<div>
<span class="days"><br></span>
<span class="timings"> 6:00 PM - 9:00 PM</span>
</div>
</b>
</li>
<li>
<div>
<span class="days">Saturday</span>
<span class="timings">9:00 AM - 5:00 PM</span>
</div>
</li>
<li>
<div>
<span class="days">Sunday</span>
<span class="timings">Closed</span>
</div>
</li>
</ul>
.list-unstyled {
padding-left: 0;
list-style: none;
}
.days {
width: 75%;
float: left;
text-align: left;
}
.timings {
width: 25%;
float: right;
text-align: left;
}
Working code