JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<div class="landingpage table">
  <div class="left">
    <div class="table">
      <div class="row">
        <div class="cell top">
          top
        </div>      
      </div>
      <div class="row">
        <div class="cell bottom">
          bottom
        </div>
      </div>
    </div>
  </div>
  <div class="mid">
    <div class="table">
      <div class="row">
        <div class="cell top">
          top<br>long<br>long<br>
        </div>      
      </div>
      <div class="row">
        <div class="cell bottom">
          bottom
        </div>
      </div>
    </div>
  </div>
  <div class="right">
    <div class="table">
      <div class="row">
        <div class="cell top">
          top<br>long<br>long<br>top<br>long<br>long<br>top<br>long<br>long<br>
        </div>      
      </div>
      <div class="row">
        <div class="cell bottom">
          bottom<br>bottom
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

div {
  box-sizing: border-box;
}


.table {
  display: table;
  width: 100%;
  height: 100%;
  
  .row {
    display: table-row;
  }
  
  .cell {
    display: table-cell;
    
    &.top {
      vertical-align: top;
    }
    
    &.bottom {
      vertical-align: bottom;
    }
  }
}

.landingpage {
  white-space: nowrap;
}

.left, .right, .mid {
  display: table-cell;
  background: lightblue;
  height: 100%;
  vertical-align: top;
}

.left, .right {
  width: 20%;
  background: lightgrey;
}

.mid {
  width: 60%;
}