JSFiddle - React, Tailwind, and code Playground

by hbirjand

HTML

<ul id="double">
  <li class="odd">asdas</li>
  <li class="even">eee</li>
  <li class="odd">iii</li>
  <li class="even">qqqq</li>
  <li class="odd">yyyy</li>
  <li class="even">pppp</li>
  <li class="odd">p222</li>
</ul>

CSS

ul{
  width:200px;
  overflow: hidden;
  border: 1px solid red;
  padding: 5px;
}

li{
  line-height: 1.5em;
  float: left;
  display: inline;
  margin-left:4px;
  margin-right:4px
}

#double li  { 
  width:45%;
}
li.odd {border-bottom:3px solid #ccc;float:left;}
li.even {border-bottom:3px solid #ccc;float:right;}