JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<main lang="de">
<p>
Text1 
</p>
<p>
Donaudampfschifffahrtskapitänsmützenbandorden
</p>
<p>
Schwatzerei
</p>

<div>
<p>
Gelaber 1 
</p>
<p>
Text2
</p>
<p>
Text3
</p>
</div>
</main>

CSS

main {
  display: grid;
  grid-template-columns: repeat(3, minmax(1em, max-content));
  hyphens: auto;
  justify-content: start;
}

div {
  display: grid;
  grid-template-columns: min-content;
  grid-auto-flow: column;
}

p { border: 1px solid red;}