JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <ul>
    <li>text 1</li>
    <li>text 2</li>
    <li>text 3</li>
    <li>text 4</li>
    <li>text 5</li>
  </ul>
</div>

CSS

div{
  position:relative;
  }
div:after{
  content:'';
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:#bbb;
  left:50%;
  }
ul{
  overflow:hidden;
}
li:nth-child(odd){
  float:left;
  clear:right;
}
li:nth-child(even){
  float:right;
  clear:left;
}