Flexbox-stretch textarea in der Spalte

Ich versuche das textarea in eine 2-Spalten-layout zu dehnen und füllen den leeren Raum. Also die Rechte Spalte ist variabel in Höhe und ich möchte die textarea in die linke Spalte zu dehnen und füllen den leeren Raum. Ich habe versucht, mit align-items: Strecken auf das übergeordnete Element als auch die Einstellung der Höhe bis zu 100% auf die textarea-Komponente und ich kann nicht scheinen, um es zu wachsen, um den Raum zu füllen.

Hier ist der HTML -

<div class="row">
    <div class="left">
        <h1>Stuff</h1>
        <textarea></textarea>
    </div>
    <div class="right">
        <h1>Preview</h1>
        <div class="content"></div>
    </div>
</div>

Hier sind die Stile

.row{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
}

.row > div{
  flex: 0 0 50%;
  max-width: 50%;
}

textarea{
  height: 100%;
}

.content{
  height: 500px;
  background-color: green;
}

Hier ist ein plunkr

Ich verstehe die Notwendigkeit für vendor-Präfixe und alle, so dass Sie nicht brauchen, um in diese zu bekommen. Dies ist nur eine vereinfachte version von meinem code veranschaulicht das problem, das ich habe.