JSFiddle - React, Tailwind, and code Playground

by hisbvdis

HTML

<ul id="container">
  <li class="word">foo</li>
  <li class="word">bar</li>
  <li class="num">1</li>
  <li class="num">2</li>
  <li class="word">baz</li>
</ul>

CSS

#container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense;
  gap: 10px;
  width: 500px;
  margin: auto;

  list-style: none;
}

li {
  background-color: #eee;
}

.word {
  grid-column: 1;
}

.num {
  grid-column: 2;
}