Aligning a textarea besides several vertically aligned input elements - html

Question

As shown in the image below, I would like to align a text area besides the vertically aligned several input elements. I am using bootstrap grid to achieve the required effect.
Currently, when I use "form-horizontal", all the items stack up in a single column, hence, the textarea lies under the phone input element.
I want it to be responsive. If I use margin property on the text area, then the inputs overlap each other and so, makes the UI look messy. It would be great if I could get your help.
Desired layout:
Current layout:
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-10 col-md-2 col-lg-2 col-lg-offset-0">
<input type="text" class="form-control" id="name" placeholder="NAME">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-md-2 col-lg-2 col-lg-offset-0">
<input type="email" class="form-control" id="email" placeholder="E-MAIL">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-md-2 col-lg-2 col-lg-offset-0">
<input type="tel" class="form-control" id="tel" placeholder="PHONE">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-md-6 col-lg-6 col-lg-offset-0">
<textarea class="form-control message" rows="6" id="comment" placeholder="MESSAGE"></textarea>
</div>
</div>
</form>
</div>

Answer 1

You can do this by nesting columns. Create two columns (equal to 12 columns), then place another row inside each along with your columns that contain the form inputs. I imagine you want your input to use the entire space available so set the nested columns to col-*-12 so they utilize the entire parent columns width.
Working Example: Open at FullPage
form {
background: #f2f2f2;
padding: 20px 20px 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<input type="text" class="form-control" id="name" placeholder="NAME">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="E-MAIL">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input type="tel" class="form-control" id="tel" placeholder="PHONE">
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<textarea class="form-control message" rows="6" id="comment" placeholder="MESSAGE"></textarea>
</div>
</div>
</div>
</div>
</div>
</form>
</div>