JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
    <li><h2>A: </h2>
        <ul>
            <li>Australia</li>
            <li>Afghanistan</li>
        </ul>
    </li>
   <li>
       <h2>B: </h2>
        <ul>
            <li>Belgium</li>
            <li>Brazil</li>
        </ul>
    </li>   
     <li><h2>A: </h2>
        <ul>
            <li>Australia</li>
            <li>Afghanistan</li>
        </ul>
    </li>
   <li>
       <h2>B: </h2>
        <ul>
            <li>Belgium</li>
            <li>Brazil</li>
        </ul>
    </li>   
     <li><h2>A: </h2>
        <ul>
            <li>Australia</li>
            <li>Afghanistan</li>
        </ul>
    </li>
   <li>
       <h2>B: </h2>
        <ul>
            <li>Belgium</li>
            <li>Brazil</li>
        </ul>
    </li>   
     <li><h2>A: </h2>
        <ul>
            <li>Australia</li>
            <li>Afghanistan</li>
        </ul>
    </li>
   <li>
       <h2>B: </h2>
        <ul>
            <li>Belgium</li>
            <li>Brazil</li>
        </ul>
    </li>   
     <li><h2>A: </h2>
        <ul>
            <li>Australia</li>
            <li>Afghanistan</li>
        </ul>
    </li>
   <li>
       <h2>B: </h2>
        <ul>
            <li>Belgium</li>
            <li>Brazil</li>
        </ul>
    </li>   
 </ol>

CSS

ol {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

h2 {
    margin: 1em 0;
    font-weight: bold;
}