JSFiddle - React, Tailwind, and code Playground

by kentho_98

HTML

<div class="outer-container">
  <div class="inner-container">
    <div class="left-cell"></div>
    <div class="list-container">
      <ul class="columnized-list">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
      </ul>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

ul {
  list-style-type: none;
}

.outer-container {
  border: 1px solid green;
  width: 100%;
}

.inner-container {
  display: table;
  border: 1px solid black;
}

.left-cell {
  display: table-cell;
  border: 1px dashed blue;
  min-width: 5rem;
  max-width: 5rem;
}

.list-container {
  display: table-cell;
  border: 1px dashed red;
}

.columnized-list {
  -webkit-columns: 3 10rem;
  -moz-columns: 3 10rem;
  columns: 3 10rem;
  -webkit-column-rule: 1px solid black;
  -moz-column-rule: 1px solid black;
  column-rule: 1px solid black;
}