JSFiddle - React, Tailwind, and code Playground

by Alexander Tewpin

HTML

<div class="row">
  <div class="column">
    <div class="block">
      <div>Task</div>
      <div>Task</div>
      <div>Task</div>
      <div>Task</div>
      <div>Task</div>
      <div>Task</div>
      <div>Task</div>
      <div>Task</div>
      <div>Task</div>
      <div>Task</div>
      <div>Task</div>
    </div>
    <div class="block">
      <div>Task</div>
      <div>Task</div>
      <div>Task</div>
    </div>
  </div>
  <div class="column">
    <div class="block">1</div>
    <div class="block">2</div>
  </div>
  <div class="column">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
  </div>
  <div class="column">
    <div class="block">1</div>
  </div>
  <div class="column">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
  </div>
</div>
<div class="row">
  <div class="block">1</div>
  <div class="block">2</div>
</div>

SCSS

.row {
  display: flex;
  width: 400px;
  &>*{
    flex: 1;
  }
}

.column {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  &>* {
    flex: 1;
  }
}

.block {
  border: 1px solid grey;
  &:hover {
    color: white;
    background-color: tomato;
  }
}