JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="column">
    <ul>
      <li>Test Area 1</li>
      <li>Test Area 2</li>
      <li>Test Area 3</li>
      <li>Test Area 4</li>
    </ul>
    <ul>
      <li>Test Area 11</li>
      <li>Test Area 12</li>
      <li>Test Area 13</li>
      <li>Test Area 14</li>
    </ul>
  </div>
  <div class="column">
    <ul>
      <li>Test Area 5</li>
    </ul>
    <ul>
      <li>Test Area 15</li>
    </ul>
  </div>
  <div class="column">
    <ul>
      <li> Test 6</li>
    </ul>
    <div class="line"></div>
    <ul>
      <li>Test Area 7</li>
    </ul>
    <ul>
      <li>Test Area 8</li>
    </ul>
    <div class="line"></div>
    <ul>
      <li>Test Area 9</li>
    </ul>
    <ul>
      <li>Test Area 10</li>
    </ul>
    <ul>
      <li>Test Area 16</li>
      <li>Test Area 17</li>
      <li>Test Area 18</li>
      <li>Test Area 19</li>
      <li>Test Area 20</li>
    </ul>
  </div>
</div>

CSS

.container{
    width: 596px;
    float:left;
}
.container .line {
    border-bottom: 1px dotted #999;
    border-top-style: none;
    margin: 7px 0;
    padding: 3px 0 0;
}
.column {
    display: inline;
    width: 33.3%;
}