JSFiddle - React, Tailwind, and code Playground

HTML

<section style="column-count: 2">
    <ol>
        <li>ちくわ</li>
        <li>大根</li>
        <li>ちくわ</li>
        <li>大根</li>
        <li>ちくわ</li>
        <li>大根</li>
        <li>ちくわ</li>
        <li>大根</li>
        <li>ちくわ</li>
        <li>大根</li>
    </ol>
</section>

CSS

ol {
  counter-reset: list;
  min-width: 150px;
}

ol li {
  position: relative;
  height: 25px;
  line-height: 25px;
  margin: 0 0 15px 25px;
  padding-left: 5px;
}

ol li:before {
  counter-increment: list;
  content: counter(list,upper-alpha);
  position: absolute;
  left: -25px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  background: #36479f;
  text-align: center;
  color: #eee;
}