JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<table class="table table-sm text-center table-hover">
<tbody>
  <tr class="m-0">
    <td class="w-25">
    This is the first div.
    </td>
    <td class="td2" class="w-25">
    This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
    </td>
    <td class="w-25">
    This is the thrid div
    </td>
    <td class="w-25">
      This is the four div
    </td>
  </tr>
  </tbody>
  </table>

CSS

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

tr{
  display: flex; 
}
.td2{
      white-space: nowrap;
      border: none;
      padding: 0px;
      text-align: left;
      border-collapse: collapse;
      overflow:hidden;
      text-overflow: ellipsis;
}