JSFiddle - React, Tailwind, and code Playground

HTML

<div class='wrap'>
  <div class='bar'>
    <div class='block'>A</div>
    <div class='block'>A1</div>
    <div class='block'>A2</div>
  </div>
  <div class='bar'>
    <div class='block'>B</div>
  </div>
  <div class='bar'>
    <div class='block'>C</div>
    <div class='block'>C1</div>
  </div>
</div>

CSS

.bar {
  width: calc(100%/3);
}

.block {
  background: #ccc;
  margin: 1px;
}

.bar .block:last-child {
  flex: 1;
}

.wrap {
  display: flex;
}

.bar {
  display: flex;
  flex-direction: column;
}