JSFiddle - React, Tailwind, and code Playground

by Rodwyn Moreno

HTML

<div class="grid">
  <div class="grid-item">a</div>
  <div class="grid-item">
    <h2>
    Now we have two ways of trimming text via CSS: the Ellipsis method for only one-line of text, and the line-clamp property for multi-line text trimming
    </h2>
  </div>
  <div class="grid-item">c</div>
</div>

<div class="test"></div>

<div class="race-tbl">
  <h5 class="race-name">
    Now we have two ways of trimming text via CSS: the Ellipsis method for only one-line of text, and the line-clamp property for multi-line text trimming
  </h5>
</div>

CSS

.grid {
  border: red solid thin;
  display: grid;
  grid-column-gap: 24px;
  grid-template-columns: repeat(3,calc((100% - 48px)/ 3));
}

.grid-item {
  min-width: 0;
}

h2 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
}

.test {
  border: blue solid thin;
  width: calc((100% - 120px)/6) 
}

.race-tbl {
  border: orange solid thin;
  display: grid;
  grid-template-columns: min-content auto auto min-content;
}

.race-name {
  grid-column: span 4;
}

h5 {
  margin: 0;
}