align equal column without using table - html

Question

I have li like this
<li>0 - 10 Years old</li>
<li>11 - 20 Years old</li>
They have different lengths. I want to center 2 column each row and align them left. But my attempt is not perfect, due to different length they aren't align left equally.
I thought of using table but what's a modern solution? Note that I didn't use any css framework for this.
https://jsfiddle.net/coeh77Lp/

Answer 1

Just update CSS in your fiddle to
https://jsfiddle.net/coeh77Lp/3/
ul {
width: 400px;
column-count: 2;
column-gap: 10px;
}

Answer 2

You can use a fixed width for the li:
https://jsfiddle.net/w25m1a81/1/

Answer 3

You could set the float property of each selected <li> as left or right.
Also remember to specify nth-child(2n-1) property to give a table like alignment.
.li{
float: left;
}
li:nth-child(2n){
float right
}
also display: inline-block can be use:
.li{
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
}
Also providing fixed width, height and margin for the container will improve the alignment

Answer 4

There are some adjustments we should go through so you understand how to achieve the solution you want:
Avoid inline css styles like on the <ul>
Mixing list markup with a lot of other elements can create chaotic code very fast, lets rename all <li> to <div>.
Next we want to wrap all the numeric vales in a container too, because then we have more control over the layout: e.g. <span class="numerics">51 - 60</span>
Now we build up our flexible grid system. We can use the .customLegend containers for this but I would recommend to add a new class for columns so you can separate your individual styles from those for the layout. https://www.sitepoint.com/understanding-css-grid-systems/
I added some styles for free, you can go though the css. I created a jsfiddle too if you want to try further adjustments on your own: https://jsfiddle.net/coeh77Lp/2/
.customLegend {
float: left;
width: 50%;
max-width: 170px; /* stack up cols if there is enough space */
margin-bottom: 5px;
}
.customLegend .symbol {
background: #333333;
display: inline-block;
width: 10px;
height: 10px;
border-radius: 5px;
margin-right: 3px;
}
.numerics {
text-align: right; /* better readability */
min-width: 50px;
display: inline-block;
padding: 2px 4px 2px 2px;
margin-right: 2px;
border-bottom: 2px solid #ddd;
}
.customLegend .label {
display: inline-block;
margin-right: 20px;
}
<div class="customLegend">
<span class="symbol" style="background: rgb(51, 51, 51);"></span>
<div class="label"><span class="numerics">0 - 10</span> Years old</div>
</div>
<div class="customLegend">
<span class="symbol" style="background: rgb(102, 102, 102);"></span>
<div class="label"><span class="numerics">11 - 20</span> Years old</div>
</div>
<div class="customLegend">
<span class="symbol" style="background: rgb(153, 153, 153);"></span>
<div class="label"><span class="numerics">21 - 30</span> Years old</div>
</div>
<div class="customLegend">
<span class="symbol" style="background: rgb(221, 221, 221);"></span>
<div class="label"><span class="numerics">31 - 40</span> Years old</div>
</div>
<div class="customLegend">
<span class="symbol" style="background: rgb(238, 238, 238);"></span>
<div class="label"><span class="numerics">41 - 50</span> Years old</div>
</div>
<div class="customLegend">
<span class="symbol" style="background: red;"></span>
<div class="label"><span class="numerics">51 - 60</span> Years old</div>
</div>
<div class="customLegend">
<span class="symbol" style="background: blue;"></span>
<div class="label"><span class="numerics">61 - 70</span> Years old</div>
</div>
<div class="customLegend">
<span class="symbol" style="background: pink;"></span>
<div class="label"><span class="numerics">71 - 80</span> Years old</div>
</div>
<div class="customLegend">
<span class="symbol" style="background: green;"></span>
<div class="label"><span class="numerics">81 - 0</span> Years old</div>
</div>