<ul class="column-list">
  <li>Lorem.</li>
  <li>Quibusdam!</li>
  <li>Recusandae.</li>
  <li>Facere?</li>
  <li>Sit?</li>
  <li>Recusandae!</li>
  <li>Ea!</li>
  <li>Amet!</li>
  <li>Eos.</li>
  <li>Similique.</li>
  <li>Excepturi.</li>
  <li>Nemo?</li>
  <li>Aspernatur!</li>
  <li>Ipsam.</li>
  <li>Accusantium.</li>
  <li>Dignissimos?</li>
  <li>Nesciunt.</li>
  <li>Voluptatum?</li>
  <li>Vero!</li>
  <li>Nesciunt!</li>
  <li>Ea.</li>
  <li>Cumque!</li>
  <li>Excepturi.</li>
  <li>Sint.</li>
  <li>Reprehenderit.</li>
  <li>Natus?</li>
  <li>Numquam.</li>
  <li>Iusto.</li>
  <li>Voluptate!</li>
  <li>Iusto?</li>
</ul>
.column-list {
  columns: 100px;
}

body {
  max-width: 100%;
}

External CSS

  1. https://codepen.io/chriscoyier/pen/GRpqNwX

External JavaScript

This Pen doesn't use any external JavaScript resources.