I am facing an issue with my layout where I have 2 columns, one containing some inputs and the other only a textarea. The problem is that I want the textarea in the second column to extend and fill the remaining height of the first column, but so far I haven't been able to achieve this by setting the textarea's height to 100%.
Below is a link to an example on codepen:
https://codepen.io/anon/pen/BqQMvG
<section class="contact-us">
<div class="container" style="background-color: #D6EEFD">
<div class="p-3">
<h1 class="primary-brand">
Title
</h1>
<p class="primary-brand">
Eam ex scaevola eloquentiam, ex possim torquatos per. Pro an mnesarchum assueverit. Aeque oportere rationibus ei has, unum case ut qui, eum ne hinc eligendi. Nam no harum omnium, id nominavi comprehensam pri.
</p>
<form>
<div class="container">
<div class="row">
<div class="col">
<div class="form-group">
<label for="name-input">Name</label>
<input type="text" class="form-control form-control-lg" id="name-input" aria-describedby="nameHelp">
</div>
<div class="form-group">
<label for="email-input">E-mail</label>
<input type="email" class="form-control form-control-lg" id="email-input" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="phone-input">Phone number</label>
<input type="tel" class="form-control form-control-lg" id="phone-input" aria-describedby="phoneHelp">
</div>
</div>
<div class="col">
<div>
<label for="description-input">How can we help you?</label>
<textarea class="form-control form-control-lg" id="description-input"></textarea>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</section>
What could be causing this issue?