Filling up the responsive column height

I have a page with responsive grid consisting of two columns as shown in this codepen In portrait mode (width < height), the columns get stacked vertically whereas in landscape mode ( width > height ) they get stacked horizontally. So, in the codepen, a single code is there for both orientations (portrait and landscape)

Is there a solution through which

  1. in portrait mode, both textarea share the remaining height equally
  2. in landscape mode, both textarea occupy the remaining height in their respective columns till the bottom of window screen
    while keeping the other elements at their original size?

One thing should be kept in mind: there shouldn’t be overscrolling because scrolling if any must be done in textarea only.

oh boy, not my cleanest css hacks, but it works.