JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<h2>
Grid
</h2>
<div class="grid">
  <label for="" class="grid-1">Header 1</label>
  <label for="" class="grid-2">Sub 1</label>
  <input type="text" class="grid-3">
</div>
<div class="grid">
  <label for="" class="grid-1">Header 2</label>
  <label for="" class="grid-2">Sub 2 asdfdas fasd fas</label>
  <input type="text" class="grid-3">
</div>
<div class="grid">
  <label for="" class="grid-1">Header 3</label>
  <label for="" class="grid-2">Sub 3</label>
  <input type="text" class="grid-3">
</div>

<h2>
Grid with Subgrid
</h2>
<div class="grid">
  <div class="subgrid">
    <label for="" class="grid-1">Header 1</label>
    <label for="" class="grid-2">Sub 1</label>
    <input type="text" class="grid-3">
  </div>
  <div class="subgrid">
    <label for="" class="grid-1">Header 2</label>
    <label for="" class="grid-2">Sub 2 asdfdas fasd fas</label>
    <input type="text" class="grid-3">
  </div>
  <div class="subgrid">
    <label for="" class="grid-1">Header 3</label>
    <label for="" class="grid-2">Sub 3</label>
    <input type="text" class="grid-3">
  </div>
</div>

CSS

* {
  font-family: sans-serif;
}
.grid {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 1rem;
  margin-bottom: .5rem;
}

.subgrid {
  display: grid;
  grid-column-start: 1;
  grid-column-end: 4;
  

  grid-template-columns: subgrid;
}

.grid-2 {
  font-size: 80%;
}