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</td>
        </tr>
        <tr>
          <th>Third Element</th>
          <td>Text</td>
        </tr>
        <tr>
          <th>Fourth Element</th>
          <td>Text</td>
        </tr>
      </table>
</div>

CSS

External {
  padding: 20px;
}

table {
  border-collapse: collapse;
  border: 1px solid red;

}

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

td {
  display: block;
 white-space: nowrap;
  width: 50%; 
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #000000;
}