JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<h2>With subgrid</h2>
<div class="wrapper">
  <div class="row">
    <div class="col-1">Icon</div>
    <div class="col-2">Etur nobis vel! Ipsa</div>
  </div>
  <div class="row">
    <div class="col-1">Icon</div>
    <div class="col-2">Lorem ipsum dolor</div>
  </div>
  <div class="row">
    <div class="col-1">Icon</div>
    <div class="col-2">Lorem</div>
  </div>
  <div class="row">
    <div class="col-1">Icon</div>
    <div class="col-2">Consectetur adipisicing elit. Omnis facere magnam aut</div>
  </div>
  <div class="row">
    <div class="col-1">Icon</div>
    <div class="col-2"> Nesciunt dolor dicta</div>
  </div>
</div>
<br>
<br>
<div class="wrapper">
  <div class="row">
    <div class="col-1">Icon</div>
    <div class="col-2">Etur nobis vel!</div>
  </div>
  <div class="row">
    <div class="col-1">Icon</div>
    <div class="col-2">Lorem ipsum</div>
  </div>
  <div class="row">
    <div class="col-1">Icon</div>
    <div class="col-2">Lorem</div>
  </div>
  <div class="row">
    <div class="col-1">Icon</div>
    <div class="col-2">Consectetur</div>
  </div>
  <div class="row">
    <div class="col-1">Icon</div>
    <div class="col-2"> Nesciunt dolor</div>
  </div>
</div>

CSS

* {
  font-family: sans-serif;
}
body { 
  padding: 3rem;
}

.wrapper {
  border: 1px solid gray;
  border-radius: 8px;
  padding: 1rem;    
  max-width: 18rem;
  display: inline-grid;
  grid-template-columns: max-content 1fr;

}

.row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column-start: 1;
  grid-column-end: 3;
  border-bottom: 1px solid lightgray;

  
}

.col-1, 
.col-2 {
  padding: .5rem;
}

.col-1 {
  text-transform: uppercase;
  font-size: .75rem;
  color: dodgerblue;
}

.col-2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}