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 20px 20px 20px;
  box-sizing: border-box;
    width:100%;
}

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 {
  text-overflow: ellipsis;
  overflow: hidden;
  border:1px solid blue;
}