JSFiddle - React, Tailwind, and code Playground

by MrLister

HTML

<div class="cen">
   <p>Text in div 1</p>
  </div>

  <div class="cen">
   <p>Text in div 2<br>Text in div 2</p>
  </div>

  <div class="cen">
   <p>Text in div 3 Text in div 3 Text in div 3 Text in div 3 Text in div 3</p>
  </div>

  <div class="cen">
   <p>Text in div 4<br>Text in div 4<br>Text in div 4<br>Text in div 4<br>Text in div 4</p>
  </div>

CSS

.cen {min-height:5em; width:12em; background:red; margin:1em 0}
   .cen p {display:inline-block; vertical-align:middle; margin:0 0 0 1em; width:10em}
   .cen::after {display:inline-block; line-height:5em; width:0; content:"\00A0"; overflow:hidden; vertical-align:middle}