JSFiddle - React, Tailwind, and code Playground

HTML

<h2>ul without column count</h2>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
<h2>ul with column count (using :before and float)</h2>
<ul id="withColumCountAndBefore">
  <li>1</li>
  <li>2 with a very long tail to cause a line break</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

CSS

li {
  list-style-type: none;
  margin-left: 1.5em;
  line-height: 1.25em;
  break-inside: avoid;
}
li:before {
  content: '';
  width: 0.7em;
  height: 0.7em;
  display: block;
  float: left;
  margin: 0 .5em 0 -1.3em;
  background-color: #BBB;
  position: relative;
  top: .25em;
}

ul#withColumCountAndBefore {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}