JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<h2>
Table grid
</h2>
<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 me</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ælfdkhrhoitrjhø
      asd 
      </div>
    </div>
  </div>
   <div class="table-grid-col">
   <div class="w-100">&nbsp;</div>
   </div>
  <div class="table-grid-col">
    <div>Deadline:</div>
    <div>01-09-2017</div>
  </div>
</div>

<h2>
Flex grid
</h2>

<div class="flex-grid">
  <div class="flex-grid-col">
    <div class="flex-grid">
      <div class="flex-grid-col ellipsis-wrapper">
          <div class="ellipsis ">process type name masdf asdf sadf asdf asdf adsf adsf asd fa sdfa fsddas fasd fsaf saf adsf dasf asd fdf rteayjshywrtyhryju shdgsfswergw rwe grwer gwerg we
          </div>
      </div>
      <div class="flex-grid-col">
        <span class="nowrap">
          <span class>case:</span>
          <span>11/17-2017</span>
        </span>
      </div>
    </div>
    <div class="">
    <div class="">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="flex-grid-col flex-fit-to-content">
    <div>Deadline:</div>
    <div class="nowrap">01-09-2017</div>
  </div>
  </div>

CSS

w-100 {
  width: 100%;
}
.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;
}


.flex-grid {
  display: flex;
  max-width: 100%;
  max-width: 100vw;
}

.flex-grid-wrapper {
   
}

.flex-grid-col {
  /*flex: 1;*/
  outline: 1px solid navy;
}

.flex-fit-to-content {
 flex: 0;
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
}
.nowrap {
  white-space: nowrap;
}
.ellipsis-wrapper {
     min-width: 0;
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}