JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="table-grid">
  <div class="table-grid-col">
    <div class="table-grid">
      <div class="table-grid-col">
        <div class="pos-relative">
          <div class="overflow-ellipsis">process type name med ekwnfækwengfierngf saefnhwqaf qagenhqæiwegnq erthlkjeoøæhjetrh terhoøerthkætrh rthækoterhkterh rjhølekjhøeporj tryejæmrjpomyterj</div>
        </div>
      </div>
      <div class="table-grid-col">
        <span class="phase-process-case-info">
      <span class>case:</span>
        <span>11/17-2017</span>
        </span>
      </div>
    </div>
    <div class="pos-relative">
      <div class="overflow-ellipsis">case title - jsahbfdljawbfASBFJLBlkvcngfhæk hældkhælfg khlgfæhlæfd skhældsf hksælfdkhlsækhlgfsæhk sælfkhlæfkhælfdkhæl dsgfkhæfsgkhpotrskhpotrskhotrs dshgkhoshtr trhikterohpjyters trhoitrjhø
      </div>
    </div>
  </div>
  <div class="table-grid-col">
    <div>Deadline:</div>
    <div>01-09-2017</div>
  </div>
</div>

CSS

.table-grid {
  display: table;
  width: 100%;
}

.table-grid-col {
  display: table-cell;
  vertical-align: top;
  outline: 1px solid fuchsia;
}

.table-grid-col:last-child {
  width: 1px;
  padding-left: 1rem;
  white-space: nowrap;
  text-align: right;
}

.pos-relative {
  position: relative;
}

.overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  width: 100%;
}

@media screen and (max-width: 700px) {
  .table-grid-col,
  .phase-process-case-info {
    display: block;
    max-width: calc(100vw - 8px);
  }
  .table-grid-col:last-child {
    padding-left: 0;
  }
  .overflow-ellipsis {
    position: static;
  }
}

.linebreak::after {
  content: "\00000a";
  white-space: pre;
}