JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<div class="flex">
  <p>This</p>
  <p>is</p>
  <p>a</p>
  <p>Test</p>
</div>

<div class="flex gap">
  <p>This</p>
  <p>is</p>
  <p>a</p>
  <p>Test</p>
</div>

<hr>

<div class="grid">
  <p>This</p>
  <p>is</p>
  <p>a</p>
  <p>Test</p>
</div>

<div class="grid gap">
  <p>This</p>
  <p>is</p>
  <p>a</p>
  <p>Test</p>
</div>

<hr>

<div class="column">
  <p>This</p>
  <p>is</p>
  <p>a</p>
  <p>Test</p>
</div>

<div class="column gap">
  <p>This</p>
  <p>is</p>
  <p>a</p>
  <p>Test</p>
</div>

CSS

.flex {
  display: flex;
}
.flex p {
  flex: 1;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.column {
  columns: 4;
  column-gap: 0;
}



p {
  outline: 1px red dotted;
  text-align: center;
  margin: 0 0 1em 0;
}

.gap {
  column-gap: 2em;
}