JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<div class="External">
<table>
        <tr>
          <th>First Element</th>
          <td>Text</td>
        </tr>
        <tr>
          <th>Second Element</th>
          <td>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
        </tr>
        <tr>
          <th>Third Element</th>
          <td>Text</td>
        </tr>
        <tr>
          <th>Fourth Element</th>
          <td>Text</td>
        </tr>
      </table>
</div>

CSS

table {
  width:100%;
  border-collapse: collapse;
 
  table-layout:fixed;
}

th {
  text-align: left;
  border-bottom: 1pt solid #4C4C4C;
  border-right: 1pt solid #4C4C4C;
  padding: 8px;
  width:20%;
}

td {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
   width:100%;
   border: 1px solid #000000;
   word-wrap:break-word;
}