Currently, I am in the process of creating a simple contact form using Bootstrap-4. The layout consists of 1 row with 2 columns: the left column contains input text fields and selection menus, while the right column includes a textarea. The challenge I'm facing is making sure that the height of the textarea matches the height of the left column.
I have tried applying the h-100 class to both the textarea and its parent div, but the textarea ends up being taller than the left column.
If you'd like to take a look at the issue, here's a link to a screenshot: https://i.sstatic.net/ZwkAk.png
<div id="content" class="margin-from-nav">
<div class="container">
<form>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="form-group">
<label for="inputName1">First Name</label>
<input type="text" class="form-control" id="inputName1" placeholder="First Name">
</div>
<div class="form-group">
<label for="inputName2">Last Name</label>
<input type="text" class="form-control" id="inputName2" placeholder="Last Name">
</div>
<div class="form-group">
<label for="inputEmail4">Email Address</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group">
<label class="mr-sm-2" for="inlineFormCustomSelect">Subject of Inquiry</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<option selected>Select a subject...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="form-group h-100">
<label for="exampleFormControlTextarea1">Message Content</label>
<textarea class="h-100 form-control" id="exampleFormControlTextarea1" rows="10"></textarea>
</div>
</div>
</div>
</form>
</div>
</div>