JSFiddle - React, Tailwind, and code Playground

by Kolichikov

HTML

<div class='container'>
  <div class='title'>Title that is super long and we are going to have a problem fitting it</div>
  <div class='location'>location</div>
  <div class='notes'>notes</div>
  <div class='links'>links</div>
  <div class='date'>date</div>
</div>

this won't quite work as we expect, for instance, if you remove links, notes won't shift to the end, so
Title will only take up 2 rows, then notes, then emptiness
<br>
Currently I've set up both notes and Title to fill up space, but this isn't required.
<br>
If you need things to go in particular places, you can fill that in at generation, server-side. So assign line1 line2 line3 line4 classes to the items you have, then construct the grid around those items. If you want Title to take up the most space, start from the last class, and fill that in without gaps. If you want things to be in consistent placement, then start from the front and apply the classes normally.

CSS

.container > *{
border: 1px solid black;
}
.container
{
  display:grid;
  grid-template-columns:[first] 70px [second] 1fr;
  grid-template-rows:1fr 25% 25% 25% [lastRow];
  height:70px;
  width:220px;
  grid-template-areas:
  "date title"
  "date location"
  "date notes"
  "date links";
  border: 1px solid black; 
  background:pink;
  grid-auto-flow:dense;
}

.title
{
  grid-area:title;
  /* grid-row-end:lastRow; */
  overflow:hidden;
}

.location
{
  grid-area:location;
  /* grid-row-end:lastRow; */
}
.notes
{
  grid-area:notes;
/*   grid-row-end:lastRow; */

}

.links
{
  grid-area:links;
  /* grid-row-end:lastRow; */
}

.date{
  grid-area:date;
  grid-row-end:lastRow;
  background:red !important;
}