JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
<div class='header'>it's a header</div>
  <div class='column1'>column 1</div>
  <div class='column2'>column 2</div>
</div>

CSS

* { box-sizing: border-box; position: relative; }

.container {
  border: 2px solid gray;
  display: flex;

  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  
  height: 300px;
}

.header {
  flex-basis: 100%;
  
  border: 2px solid magenta;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.column1 {
  flex-basis: 150px;
/*   height: calc(100% - 50px); */
  align-self: stretch;
  
  border: 2px solid green;
}

.column2 {
/*   height: calc(100% - 70px); */
  align-self: stretch;  
  flex-basis: calc(100% - 150px);
  border: 2px solid orange;
}