JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<div class="panel">
  <ul>
    <li>Lorem ipsum dolar</li>
   <li>Posuere erat a ante venenatis dapibus posuere velit aliquet</li>
    <li>Nulla vitae elit libero, a pharetra augue</li>
   <li>Donec id elit non mi porta gravida at eget metus</li>
    <li>Natoque penatibus et magnis dis parturient montes</li>
    <li>Integer posuere erat </li>
  </ul>
</div>

SCSS

*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

body {
  margin: 20px;
}


ul {
  column-count: 2;
  column-gap: 2rem;
  font-size: 20px;
  list-style-position: outside;
  list-style-type: disc;
  
  // orphans: 3;
  
}

.panel {
  background-color: peru;
  padding: 40px;
  width: 300px;
}