JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <ul class="double_column">
      <li>1. I'm glad to meet you. Here is a short code to list items in two columns.</li>
      <li>2. Please refer to the folloing link: </li>
      <li>3</li>
      <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>100</li>
  <li>11</li>
  <li>12</li>
</ul>
</div>

CSS

#main {
    width: 450px;

}
.double_column {
    padding: 5px; 
    margin: 0;
    list-style-type: none;
}
.double_column li {
    width: 40%;
    height: 200px;
    background-color: red;
    float: left;
    margin: 5px;
    padding: 5px;
}

/* nth-child for a specific range. In this case from 4th to 8th li */
c​.double_column li:nth-child​nth-child(n+4):nth-child(-n+8(n+4):nth-child(-n+8c​
{
    background-color: blue;
}