JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="columns">
  <p>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae sequi deserunt, reiciendis in nemo laborum suscipit enim sunt delectus, culpa, deleniti quas atque ut hic explicabo. Quidem voluptatum, iusto laboriosam.</p>
  
  <p>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae sequi deserunt, reiciendis in nemo laborum suscipit enim sunt delectus, culpa, deleniti quas atque ut hic explicabo. Quidem voluptatum, iusto laboriosam. Quidem voluptatum, iusto laboriosam.</p>
  
  <h2>Lorem ipsum dolor sit amet</h2>
  
  <p>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae sequi deserunt, reiciendis in nemo laborum suscipit enim sunt delectus, culpa, deleniti quas atque ut hic explicabo. Quidem voluptatum, iusto laboriosam.</p>
  
  <p>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae sequi deserunt, reiciendis in nemo laborum suscipit enim sunt delectus, culpa, deleniti quas atque ut hic explicabo. Quidem voluptatum, iusto laboriosam.</p>
</div>

CSS

body {
  height: 100%;
  columns: 2;
}
h2 {
  break-inside: avoid-column;
}