JSFiddle - React, Tailwind, and code Playground

by aflynt

HTML

<table>
<tbody>
  <tr>
    <td class="bordered">
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam orci tortor, vehicula sed leo et, sollicitudin dignissim quam. Duis nec elementum dui. Nunc tincidunt sollicitudin quam sed ultricies. Duis feugiat id diam sit amet placerat. Nunc ut turpis eu magna eleifend molestie nec eu enim. Fusce libero augue, vestibulum vel magna a, dictum tincidunt elit.</p>
        <p>Nullam felis mauris, convallis vitae magna ac, lobortis vehicula est. Vivamus condimentum quam nec purus ultricies vehicula. Duis ac pharetra velit, eget finibus ex.</p>
      </div>
    </td>
  </tr>
    <tr>
    <td>
      <div>
        <p>Phasellus risus urna, efficitur vitae maximus non, laoreet sed lectus. Etiam porttitor faucibus purus, eget euismod est accumsan ac. Suspendisse potenti. Ut tristique lorem sit amet efficitur vulputate.</p>
        <p>Sed fringilla laoreet arcu at pharetra. Vivamus sit amet sapien ipsum. Donec non massa ac quam ultricies euismod. Vivamus vel justo augue. Donec malesuada purus quis tincidunt vehicula. In eleifend, massa dictum dignissim pharetra, ipsum justo consequat ante, nec pharetra dui est quis arcu.</p>
      </div>
    </td>
  </tr>
</tbody>
</table>

CSS

table {
  padding: 0 20px;
}

.bordered {
  position: relative;
}

.bordered:after {
  border-bottom: 2px solid #CCC;
  bottom: 0;
  content: "";
  left: -20px;
  position: absolute;
  width: calc(100% + 40px);
  
}