JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="col-md-4">
  <div class="panel panel-default">
    <div class="panel-body">
      <table class="table table-crm">
        <tr>
          <td>Text:</td>
          <td>This is a long text that will get out of the borders of the table because it is in fact very very long, yes it is really very very long text.
        </tr>
        <tr>
          <td>Another text:</td>
          <td>Just a short text</td>
      </table>
    </div>  
  </div>
</div>

SCSS

$bg-main: #28282A;
body {
  background-color: $bg-main;
}

.panel {
  margin: 10px;
}
.panel-body {
  padding: 0px;
}

.table-crm {
  margin: 0px;
  
  td {
    white-space: nowrap;
  }
  
  // First TD
  td:first-child {
    width: 1%;
    font-weight: bold;
  }
  
  // Second TD
  td + td {
    max-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}