Boostrap 4: заставить текстовое поле соответствовать высоте столбца

Question

Я пытаюсь создать текстовую область внутри столбца bootstrap, чтобы заполнить оставшуюся высоту столбца CCS (без JS).

.form-row {
  background: yellow;
  padding: 20px;
}

.col-9 {
  background: lightgreen;
}

.col-3 {
  background: violet;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
  <div class="col-9">
    <div class="form-group">
      <label>Your Text</label>
      <textarea class="form-control">This textarea should fill the remaining height / green box</textarea>
    </div>
  </div>
  <div class="col-3">
    some random stuff<br> some random stuff<br> some random stuff<br> some random stuff<br> some random stuff<br> some random stuff<br>
  </div>
</div>

Текстовое поле слева должно соответствовать высоте правой стороны (заполните оставшуюся высоту родительского элемента).

Однако я Я не совсем уверен, как достичь этого простым способом - без изменения каждой группы col / form-group. Создание текстовой области height: 100% не является решением, поскольку оно переполняет родительский элемент.

Fiddle для справки

Обновление: оно также должно сохранять margin-bottom из группа форм внутри столбца. Конечный результат должен выглядеть примерно так: this Fiddle

.form-row {
  background: yellow;
  padding: 20px;
}

.col-9 {
  background: lightgreen;
}

.col-3 {
  background: violet;
}

textarea.form-control {
  height: 96px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
  <div class="col-9">
    <div class="form-group">
      <label>Your Text</label>
      <textarea class="form-control">This textarea should fill the remaining height / green box</textarea>
    </div>
  </div>
  <div class="col-3">
    some random stuff<br> some random stuff<br> some random stuff<br> some random stuff<br> some random stuff<br> some random stuff<br>
  </div>
</div>

Answer 1

Попробуйте: HTML

<div class="form-row">
  <div class="col-9">
    <div class="form-group form-div">
      <label>Your Text</label>
      <textarea class="form-control">This textarea should fill the remaining height / green box</textarea>
    </div>
  </div>
  <div class="col-3">
    some random stuff<br>
    some random stuff<br>
    some random stuff<br>
    some random stuff<br>
    some random stuff<br>
    some random stuff<br>
  </div>
</div>

CSS:

.form-row {
  background: yellow;
  padding: 20px;
}

.col-9 {
  background: lightgreen;
}

.col-3 {
  background: violet;
}

.form-div {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 1rem;
  margin-bottom: 0px;
}

textarea.form-control {
  height: 100%;
}

Вы можете прочитать о свойствах flex здесь