JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div class="feedWrapper">

  <div class="grid-item">
    <div class="inner">
      <div class="content">
        <p>Content goes here</p>
      </div>
    </div>
  </div>

  <div class="grid-item">
    <div class="inner">
      <div class="content">
        <p>Content goes here, so this one is gonna be taller than the 1st and 3rd one...</p>
      </div>
    </div>
  </div>

  <div class="grid-item">
    <div class="inner">
      <div class="content">
        <p>Content goes here for 3rd item</p>
      </div>
    </div>
  </div>

  <div class="grid-item">
    <div class="inner">
      <div class="content">
        <p>4th Content goes here</p>
      </div>
    </div>
  </div>

  <div class="grid-item">
    <div class="inner">
      <div class="content">
        <p>5th item is this one</p>
      </div>
    </div>
  </div>

  <div class="grid-item">
    <div class="inner">
      <div class="content">
        <p>6th item</p>
      </div>
    </div>
  </div>

  <div class="grid-item">
    <div class="inner">
      <div class="content">
        <p>7th Content goes here, 7th Content goes here, 7th Content goes here, 7th Content goes here,</p>
      </div>
    </div>
  </div>

  <div class="grid-item">
    <div class="inner">
      <div class="content">
        <p>8th item is this one</p>
      </div>
    </div>
  </div>

  <div class="grid-item">
    <div class="inner">
      <div class="content">
        <p>9th item</p>
      </div>
    </div>
  </div>


</div>

CSS

/* basic simple reset: */
*,
::before,
::after {
  box-sizing: border-box;
  font: normal 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

.feedWrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  justify-content: space-between;
}

.grid-item {
  flex-basis: 32%;
  justify-content: space-between;
  gap: 0.5em;
}

.inner {
  display: flex;
  align-content: stretch;
  height: 100%;
}

.content {
  border: 1px solid red;
  flex-grow: 1;
}