JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <div class="column" id="first">First</div>
  <div class="column" id="second">Second</div>
  <div class="column">Third</div>
</section>
<section>
  <div class="column">First</div>
  <div class="column">Second</div>
  <div class="column">Third</div>
  <div class="column">Fourth</div>
  </div>
</section>

CSS

section {
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
}

.column {
  width: 100%;
  background-color: #e2e2e2;
  padding: 1%;
  margin: 1%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

#first {
  flex-grow: 2;
  flex-shrink: 2;
  flex-basis: 0;
}