Rails contact form alignments - css

Question

So I have this contact form in rails
<div class="field">
<%= f.label :name %><br />
<%= f.text_field :name %>
</div>
<div class="field">
<%= f.label :email %><br />
<%= f.text_field :email %>
</div>
<div class="field">
<%= f.label :phone %><br />
<%= f.text_field :phone %>
</div>
<div class="field">
<%= f.label :description %><br />
<%= f.text_area :description, :size=>"30x3" %>
</div> <br/>
<div class="actions">
<%= f.submit "Submit" %>
</div>
<% end %>
I want my form to utilize full page, i.e. I want the fields till phone to be on the left side and the description as a text area on the right horizontally.
Something like this
I am using bootstrap with the rails.
I tried with col-md-4 for 1 part and col-md-8 for another. doesn't fix that.
Please help.

Answer 1

From this template i made here:
http://www.bootply.com/XAMvtjjoQw
You can adapt it to ruby like this:
<form>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<%= f.text_field :name, :class => "form-control" %>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<%= f.text_field :email, :class => "form-control" %>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<%= f.text_field :phone, :class => "form-control" %>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="exampleInputFile">File input</label>
<%= f.text_area :description, :class=>"form-control", :size=>"30x3" %>
</div>
</div>
</form>

Answer 2

for a pure HTML layout you can do this:
<form action='' method='post'>
<div class='row'>
<div class='col-md-2'>
<div class='control-group'>
<label for="name">Name</label>
<input id="name" type='text' name='name' value='' class='form-control'>
</div>
<div class='control-group'>
<label for="email">Email</label>
<input id="email" type='text' name='email' value='' class='form-control'>
</div>
<div class='control-group'>
<label for="phone">Phone</label>
<input id="phone" type='text' name='phone' value='' class='form-control'>
</div>
</div>
<div class='col-md-10'>
<div class='control-group'>
<label for="description">Description</label>
<textarea id="description" name='description' class='form-control' rows='4'></textarea>
</div>
<div class='control-group'>
<br><input type='submit' name='submit' value='Submit' class='btn btn-sm btn-info'>
</div>
</div>
</div>
</form>