JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<div class="responsive-box columns-3">
  <div class="wrapper">
    <div class="col col1">
      <div class="top">
        Normal
      </div>
      <div class="bottom">
        bottom
      </div>
    </div>
    <div class="col col2">
      <div class="top">
        Looong<br>Looong
      </div>
      
      <div class="bottom">
        bottom
      </div>
    </div>
    <div class="col col3">
      <div class="top">
        Loooooooooooongest<br>Loooooooooongest<br>Long
      </div>
      
      <div class="bottom">
        bottom
      </div>
    </div>
  </div>
</div>

SCSS

body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.responsive-box {
  .wrapper {
    display: table;
    width: 100%;
    background: red;
  }
  
  &.columns-3 {
    .col {
      width: 33.3333%;
    }
  }
  
  .col {
    display: table-cell;
    
    .top {
      vertical-align: top;
    }
    
    .bottom {
      vertical-align: bottom;
    }
  }
}

.responsive-box.columns-3 {
  .col1, .col3 {
    width: 25%;
  }
  
  .col2 {
    width: 50%;
  }
}