In my HTML document, I have multiple sections with unordered lists of items. In a specific ul section, the list looks like this:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>ck-item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>ck-item 4</li>
<li>item 5</li>
<li>ck-item 5</li>
</ul>
I want to use CSS classes to format the list into two columns like this:
item 1
item 2 ck-item2
item 3
item 4 ck-item4
item 5 ck-item5
I have been struggling to achieve this for hours and any help would be appreciated.
EDIT: Another approach results in uneven alignment based on text length:
<ul>
<li>item 1</li>
<li>item 2 ck-item 2</li>
<li>item 3</li>
<li>item 4 ck-item 4</li>
<li>item 5 ck-item 5</li>
</ul>
This method leads to messy output depending on text length, which is not ideal. My goal is to create evenly spaced columns regardless of text length.