JSFiddle - React, Tailwind, and code Playground

HTML

<div class="total">
  <table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td class="one">Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</td>
      <td class="two">Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</td>
      <td class="three">Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</td>
    </tr>
  </table>
</div>

CSS

.total {
    width:500px;
    color:#fff;
    font-weight:700;
    border:1px solid red;
    padding:10px 0
}
td.one {
    background-color:gray;
    width:40%
}
td.two {
    background-color:blue;
    width:40%
}
td.three {
    background-color:darkorange;
    width:20%
}
.one,  .two,  .three {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    float:left
}