JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<table>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Conferam tecum, quam cuique verso rem subicias; Quae ista amicitia est? Poterat autem inpune; Istam voluptatem perpetuam quis potest praestare sapienti? Tollitur beneficium, tollitur gratia, quae sunt vincla concordiae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Conferam tecum, quam cuique verso rem subicias; Quae ista amicitia est? Poterat autem inpune; Istam voluptatem perpetuam quis potest praestare sapienti? Tollitur beneficium, tollitur gratia, quae sunt vincla concordiae. </td>
      <td>Lorem</td>
      <td>
        <div>
          <p>1</p>
          <p>2</p>
        </div>
      </td>
    </tr>
  </tbody>
</table>

CSS

table {
 border-collapse: collapse;
 border-spacing: 0;
 width: 100%;
 height: 1px;
}

tbody {
  height: 100%;
}

td {
  border: 1px solid firebrick;
  padding: 10px;
}

div {
  height: 100%;
  
  display: flex;
  flex-direction: column;
  background-color: lightblue;
}

p + p {
  margin-top: auto;
}