JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<table>
  <tr>
    <td>Ut accumsan, magna at elementum consectetur, felis mauris tempus velit, a cursus nunc mi non leo. Pellentesque vel urna odio, nec pharetra nibh. Sed vel dui a odio ornare molestie vitae id velit. </td>
    <td>Duis urna sem, semper id eleifend egestas, vehicula et purus. Nam a sed hendrerit lorem.  </td>
    <td>Sed adipiscing nibh eu erat rhoncus sed mollis enim dictum. Vestibulum ut risus mi, vitae laoreet nisl. Praesent ac metus arcu.  </td>
  </tr>
  <tr>
    <td>Ut commodo diam non quam rutrum sagittis. Etiam nec ipsum a tortor laoreet mattis. Aenean malesuada mi a augue semper aliquam. </td>
    <td>Duis urna sem, semper id eleifend egestas, vehicula et purus. Nam a mauris odio, sed lorem.</td>
    <td>Ut accumsan, magna at elementum consectetur, felis mauris tempus velit, a cursus nunc mi non leo. Pellentesque vel urna odio, nec pharetra nibh. </td>
  </tr>
  <tr>
    <td>Sed adipiscing nibh eu erat rhoncus sed mollis enim dictum. Vestibulum ut risus mi, vitae laoreet nisl.</td>
    <td>Duis urna sem, semper id eleifend egestas, vehicula et purus. Nam a mauris odio. </td>
    <td>Ut commodo diam non quam rutrum sagittis. Etiam nec ipsum a tortor laoreet mattis. Aenean malesuada mi a augue semper aliquam. </td>
  </tr>
</table>


<div id="titleprovider" title="Top, center"></div>

CSS

table { margin: 20px; }

table td { padding:20px; height: 180px;  border: 1px solid #000; }

table td:nth-child(1), table td:nth-child(2), table td:nth-child(3) { width: 160px; }

table tr:nth-child(1) td:nth-child(1) { vertical-align:top; }
table tr:nth-child(1) td:nth-child(2) { vertical-align:top; text-align: center;  }
table tr:nth-child(1) td:nth-child(3) { vertical-align:top; text-align: right; }

table tr:nth-child(2) td:nth-child(1) { vertical-align:center;  }
table tr:nth-child(2) td:nth-child(2) { vertical-align:center; text-align: center; }
table tr:nth-child(2) td:nth-child(3) { vertical-align:center; text-align: right; }

table tr:nth-child(3) td:nth-child(1) { vertical-align:bottom; }
table tr:nth-child(3) td:nth-child(2) { vertical-align:bottom; text-align: center; }
table tr:nth-child(3) td:nth-child(3) { vertical-align:bottom; text-align: right; }

div#titleprovider { width:200px; height:200px; }