Как растянуть textarea на всю оставшуюся высоту?

Question

[denism300]

Есть форма, сверстанная на Bootstrap 4. Код формы (живое демо тут: https://jsfiddle.net/denism300/19tL6e07/7):

<div class="container">
  <div class="form-row">
    <div class="col-12 col-lg-6 mb-3 mb-lg-0">
      <div class="mb-3">
        <input type="text" name="name" value="" size="40" class="form-control" aria-required="true" aria-invalid="false" placeholder="Фамилия Имя Отчество">
      </div>
      <div class="mb-3">
        <input type="tel" name="phone" value="" class="form-control" size="40" aria-required="true" placeholder="+7 (___) ___ - __ - __">
      </div>
      <div class="mb-3">
        <input type="email" name="your-email" value="" size="40" class="form-control" aria-invalid="false" placeholder="Ваш e-mail">
      </div>
      <div class="mb-0 mb-lg-3">
        <input type="text" name="your-addr" value="" size="40" class="form-control" aria-invalid="false" placeholder="Адрес доставки">
      </div>
    </div>
    <div class="col-12 col-lg-6 mb-3 mb-lg-0">
      <div class="mb-3">
        <input type="text" name="your-type" value="" size="40" class="form-control" aria-invalid="false" placeholder="Тип выписки">
      </div>
      <div class="mb-3">
        <textarea name="your-kadastr" cols="40" rows="5" class="form-control h-100" aria-invalid="false" placeholder="Адрес или кадастровый номер объекта"></textarea>
      </div>
    </div>
  </div>
</div>

Как поле textarea растянуть на всю оставшуюся высоту блока, чтобы обе колонки получились равной высоты?

Comments

[tempick]

по ссылке 404 выдает

[denism300]

tempick, поправил ссылку

Answer 1

[denism300]

Сам спросил - сам отвечу:
https://jsfiddle.net/denism300/19tL6e07/8/

Comments

[Антон Р.]

Так и как в итоге?

[denism300]

Антон Р., я ж дал ссылку на живой пример
Вот так:

<div class="container">
  <div class="form-row">
    <div class="col-12 col-lg-6 mb-3 mb-lg-0">
      <div class="mb-3">
        <input type="text" name="name" value="" size="40" class="form-control" aria-required="true" aria-invalid="false" placeholder="Фамилия Имя Отчество">
      </div>
      <div class="mb-3">
        <input type="tel" name="phone" value="" class="form-control" size="40" aria-required="true" placeholder="+7 (___) ___ - __ - __">
      </div>
      <div class="mb-3">
        <input type="email" name="your-email" value="" size="40" class="form-control" aria-invalid="false" placeholder="Ваш e-mail">
      </div>
      <div class="mb-0 mb-lg-3">
        <input type="text" name="your-addr" value="" size="40" class="form-control" aria-invalid="false" placeholder="Адрес доставки">
      </div>
    </div>
    <div class="col-12 col-lg-6 mb-3 mb-lg-0 d-lg-flex flex-lg-column">
      <div class="mb-3">
        <input type="text" name="your-type" value="" size="40" class="form-control" aria-invalid="false" placeholder="Тип выписки">
      </div>
      <div class="mb-3 flex-fill">
        <textarea name="your-kadastr" cols="40" rows="5" class="form-control h-100" aria-invalid="false" placeholder="Адрес или кадастровый номер объекта"></textarea>
      </div>
    </div>
  </div>
</div>