How to Get Columns Next To One Another and Iterate By Row in Jinja and HTML

Question

I am trying to follow this example to use slice in jinja to create multiple columns:

<div class="columnwrapper">
  {%- for column in items|slice(3) %}
    <ul class="column-{{ loop.index }}">
    {%- for item in column %}
      <li>{{ item }}</li>
    {%- endfor %}
    </ul>
  {%- endfor %}
</div>

When I apply to this to my project it generates three different columns in HTML as in the template, but in terms of display instead of displaying as:

Column 1 | Column 2 | Column 3
Item 1   | Item 3   | Item 5
Item 2   | Item 4   | Item 6

It displays as:

Column 1 

Item 1  
Item 2  

Column 2 

Item 3  
Item 4  

Column 3 

Item 5 
Item 6  

I am not sure how to get it to display as actual columns next to one another. Ideally, I'd like to be able to get it to display as columns and have the items iterate across the rows rather than down the columns like this:

Column 1 | Column 2 | Column 3
Item 1   | Item 2   | Item 3
Item 4   | Item 5   | Item 6

How do I change the display to actually be columns next to one another and is there a way in jinja do the slice iteration by row rather than by column?