JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-block">
  <div class="item block-1">Block 1</div>
  <div class="flex_block_2">
  <div class="item block-2">Block 2</div>
  <div class="item block-3">Block 3</div>
  </div>
</div>

CSS

.flex-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 50%;
  border: 1px solid #000;
}
.item {
  color: #fff;
  background-color: #242424;
  border: 1px solid #fff;
}
.block-1 {
  width: 250px;
  height: 160px;
}
.flex_block_2{
  display: flex;
  flex-direction: column-reverse;
}
.block-2,
.block-3 {
  background-color: red;
  flex-grow: 1;
}