css: sort divs/lis into two columns - css

Question

Suppose there are two kinds of elements, let's say words and numbers. They should be sorted into two columns. For the example I'm using listitems, but I don't mind changing to divs or something else if that helps.
<div id="container">
<ul>
<li>foo</li>
<li>bar</li>
<li class="num">1</li>
<li class="num">2</li>
<li>baz</li>
</ul>
</div>
Right now I'm achieving this somewhat by using margins, with the following css:
#container {
width: 500px;
margin: auto;
}
li {
float: left;
width: 200px;
background-color: #eee;
margin-bottom: 2px;
margin-right: 300px;
}
.num {
float: right;
margin-right: 0px;
margin-left: 300px;
}
resulting in
http://jsfiddle.net/he13vug4/
What would be a more elegant way to achieve this?
How could I make the numbers "start" (in terms of vertical position) already besides "bar" or even "foo"? (The next word should, however, only start below the numbers). That is, I'd like
or
instead of

Answer 1

They should be sorted into two columns, side by side
Do you need support for older browsers? If not, CSS Grid could help you
Result
#container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: dense;
gap: 10px;
width: 500px;
margin: auto;
list-style: none;
}
li {
background-color: #eee;
}
.word {
grid-column: 1;
}
.num {
grid-column: 2;
}
<ul id="container">
<li class="word">foo</li>
<li class="word">bar</li>
<li class="num">1</li>
<li class="num">2</li>
<li class="word">baz</li>
</ul>
And same code on JSFiddle

Answer 2

Use only left floating and play with clear and margin like below:
#container {
width: 500px;
margin: auto;
}
ul {
list-style:none;
}
li {
float: left;
width: 200px;
background-color: #eee;
margin-bottom: 2px;
}
li + li:not(.num) {
clear:both;
}
li + li.num {
margin-left:10px;
}
li.num + li.num {
margin-left:210px;
}
<div id="container">
<ul>
<li>foo</li>
<li>bar</li>
<li class="num">1</li>
<li class="num">2</li>
<li>baz</li>
<li>baz</li>
<li class="num">1</li>
<li class="num">2</li>
<li class="num">3</li>
<li>baz</li>
<li>baz</li>
</ul>
</div>