At the moment I am working on a website on which you can book tours.
My problem is that I want a certain input field to match the height of other input fields next to it.
To clarify my problem, see the picture below:
Booking form
As you can see, I want the "Comments" input field to match the total height of the other input fields next to it, indicated by the blue lines. Is there any way I can make this happen? This form is only using bootstrap 3, no additional CSS. I don't mind adding additional CSS if needed. HTML provided below. Important to say is that this website is also used on mobile, so I would prefer not to set the height to an amount of pixels (since it needs to be responsive).
HTML:
<form>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="col-xs-12 col-sm-6 col-md-5">
<div class="form-group">
<h3>Contact Details:</h3>
</div>
<div class="form-group">
<label for="fullname">Full name</label>
<input type="text" class="form-control" id="fullname" placeholder="Full name" name="fullname">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Email" name="email">
</div>
<div class="form-group">
<label for="phonenumber">Phone number</label>
<input type="text" class="form-control" id="phonenumber" placeholder="Phone number" name="phonenumber">
</div>
<button type="submit" class="btn btn-success pull-right">Book Now</button>
</div>
<div class="col-xs-12 col-sm-6 col-md-7">
<div class="form-group">
<h3>Any questions or comments?</h3>
</div>
<div class="form-group">
<label for="comments">Write your questions or comments here:</label>
<input type="text" class="form-control" id="comments" name="comments">
</div>
</div>
</div>
</form>
