JSFiddle - React, Tailwind, and code Playground

HTML

<!--[if lte IE 9]>
<style>
ul {
    word-spacing: -.3em;
    writing-mode: tb-lr;

}

li {
    writing-mode: lr-tb;
    word-spacing: normal;

}

*+html ul {
    writing-mode: tb-rl;
    filter: flipV();
}

*+html li {
    display: inline;
    zoom: 1;
    filter:flipH();
    background: #fff;
}
</style>
<![endif]-->
<ul>
    <li>Первый</li>
    <li>Второй</li>
    <li>Третий</li>
    <li>Четвертый</li>
    <li>Пятый</li>
    <li>Шестой</li>
    <li>Седьмой</li>
    <li>Восьмой</li>
    <li>Девятый</li>    
    <li>Деcятый</li> 
</ul>

CSS

ul {
    height: 6em;
    -moz-column-width: 6em;
    -webkit-column-width: 6em;
    column-width: 6em;
    -moz-column-gap: 0;
    -webkit-column-gap: 0;
    column-gap: 0;
    column-fill: auto;
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
    vertical-align: top;
    height: 1.5em;
    width: 6em;
    margin: 0;
    padding: 0;
}