JSFiddle - React, Tailwind, and code Playground

HTML

<table>
   <thead>
     <tr>
       <th>Firstname</th>
       <th>Lastname</th>
       <th>Age</th>
       <th>Details</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Jill</td>
       <td>Smith</td>
       <td>50</td>
        <td>
          <span>LoremipsumdolorsitametconsecteturadipiscingelitIntegemagnanunc</span>
         </td>
     </tr>
     <tr>
       <td>Eve</td>
       <td>Jackson</td>
       <td>94</td>
       <td><span>LoremipsumdolorsitametconsecteturadipiscingelitIntegemagnanunc</span></td>
     </tr>
   </tbody>
</table>

CSS

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}
table td {
  
}
table td,
table th {
  border: 1px solid #dadada;
  padding: 5px;
}
table thead th {
  text-align: left;
}
table thead th:nth-child(0),
table thead th:nth-child(1){
  width: 25%;
}

table thead th:nth-child(2){
  width: 20%;
}
table thead th:nth-child(3){
  width: 30%;
}

td {
  word-break: break-all;
}