JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="table-grid">
  <div class="table-grid-col">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    <div class='outer'>
        <div class='inner'>
             Suscipit quod dolorem necessitatibus id ab delectus, excepturi, fuga commodi saepe dignissimos odio, voluptatibus hic! Possimus quasi, ipsam non reprehenderit saepe consequuntur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore commodi voluptatum quis voluptatem quaerat, error fuga esse inventore ullam. Voluptas eaque soluta officiis quae explicabo expedita facere vel et. Quisquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime est neque doloremque odit aliquid corporis nobis quos blanditiis in, sed rerum aut, exercitationem, ad ipsa soluta placeat expedita amet pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio necessitatibus deserunt quisquam minima earum officia delectus alias quibusdam adipisci voluptatem cupiditate molestias veniam, eligendi doloribus sit libero dolorum. Voluptatum, veniam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore corporis laborum, ipsa voluptatum quas iste recusandae voluptatibus esse, fugiat enim accusamus ratione illo quidem, maxime assumenda! Eum aut, porro iusto!
        </div>
     </div>
  </div>
  <div class="table-grid-col">Dato:<br>
  20-4-2017</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;
}

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