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;
}

table {
  border-collapse: collapse;
}

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

td {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width:300px;
}

td:hover{
   display: block;
color:red;
overflow:visible;
 word-wrap: break-word;
 width:300px;
}