JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div class="broken">
    <div class="row">
        <div class="block">1</div>
        <div class="block">2</div>
        <div class="block">3</div>
    </div>

    <div class="row">
        <div class="text">Short text</div>
        <div class="text">Longer text</div>
        <div class="text">Quite a bit longer text</div>
    </div>
</div>

<div class="fixed">
    <div class="row">
        <div class="block">1</div>
        <div class="block">2</div>
        <div class="block">3</div>
    </div>

    <div class="row">
        <div class="text">Short text</div>
        <div class="text">Longer text</div>
        <div class="text">Quite a bit longer text</div>
    </div>
</div>

SCSS

.row {
  display: flex;
  
  .block, .text {
    flex: 1 0 auto;
    display: flex;
    justify-content: center;
  }
}

.fixed {
  .block, .text {
    flex: 1 0 0;
  }
  
  margin-top: 20px;
}

.broken { * { outline: 1px solid red; } }
.fixed  { * { outline: 1px solid lime; } }