JSFiddle - React, Tailwind, and code Playground

HTML

<p>float: left on li elements means that the ul element has no height so border-bottom is in the wrong place...</p>

<ul class="results">
    <li class="result1">1</li>
    <li class="result1">2</li>
    <li class="result1">3</li>
    <li class="result1">4</li>
    <li class="result1">5</li>
</ul>

<p>... but display: inline-block leaves gaps between the li elements, so it breaks over two lines.</p>

<ul class="results">
    <li class="result2">1</li>
    <li class="result2">2</li>
    <li class="result2">3</li>
    <li class="result2">4</li>
    <li class="result2">5</li>
</ul>

CSS

.results { 
  width: 100%;
  list-style: none;
  padding-bottom: 10px;
  border-bottom: 1px dotted #ccc;
}
.result1 { 
  width: 20%;
  float: left;
  background-color: blue;
}
.result2 { 
  width: 20%;
  display: inline-block;
  background-color: blue;
}