How to make textarea same height as select while still being reponsive? - html

Question

I have a form that I am developing and while I can get the form fields to be responsive for width, the textarea box is slightly taller than the select field to the right. How can I make these two the same height while keeping both responsive for mobile?
Here is a codepen of the form. Below is the code:
<div class="row">
<div class="col-md-6">
<div class="control-group">
<div class="form-group floating-label-form-group controls">
<label for="00NW0000001Zjiv" class="control-label" style="font-weight:300">Truck Model(s)</label>
<textarea id="00NW0000001Zjiv" name="00NW0000001Zjiv" type="text" class="form-control input-lg" rows="5"></textarea><span class="help-block bg-danger"></span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="control-group">
<div class="form-group floating-label-form-group controls">
<label for="00NW0000001Zjje" class="control-label" style="font-weight:300">State(s) in which the truck(s) run</label>
<select id="00NW0000001Zjje" name="00NW0000001Zjje" multiple="multiple" class="form-control input-lg">
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select><span class="help-block bg-danger"></span>
</div>
</div>
</div>
</div>
Thanks!

Answer 1

It is possible by giving manually height to textarea. So give height to textarea on media queries.
In this way you would be able to achieve the responsiveness as well.
I hope this might help you
JSFiddle Link
<div class="row">
<div class="left">
<label for="first-name">First Name</label>
<input type="text" name="first-name" placeholder="First Name" id="first-name" required="required" />
</div>
<div class="right">
<label for="details">Details</label>
<textarea name="details" placeholder="Details" id="details" required></textarea>
</div>
</div>
CSS:
#media only screen and (min-width: 600px) {
textarea { height: calc(100% - 0.75em); /* 100% fill height, minus height of details label */ }
}