JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>    
</ul>

CSS

ul {
    width: 450px;
    position: relative;
}
ul:before, ul:after {
    text-align: center;
    display: block;
    border: 1px solid black;
    border-bottom: 0;
    width: 48%;
}
ul:before {
    content: 'col1';
    border-right: 0;    
}
ul:after {
    content: 'col2';
    position: absolute;
    top: 0;
    left: 48%;
    margin-left: 1px;    
}
    
li {
    text-align: right;
    width: 47%;
    float: left;
    border: 1px solid black;
    margin-bottom: -1px;
    padding-right: 1%;
}
li:nth-child(even) {
    margin-left: -1px;
}