I am attempting to create a horizontal form with an inline text field split into two sections: one on the left and one on the right. The left side will contain horizontal text fields, some of which are inline, while the right side will have a mix of inline and non-inline fields.
How can I achieve this layout? Perhaps this diagram can provide some clarification: JSFiddle Here : http://jsfiddle.net/XQx6v/
Below is my code that is not functioning as intended (I want it centered at 900px width and responsive to smaller screens by dropping to a new line):
<form class="form-horizontal" action="" method="POST">
<!-- first Row -->
<div style="margin:auto; width:900px;" class="row">
<div class="col-xs-6">
<div class="row">
<div class="form-group">
<label class="control-label">First Name</label>
<input type="text" value="test" name="first_name" class="form-control beta">
<label class="control-label">Last Name</label>
<input type="text" value="test" name="last_name" class="form-control beta"> </div>
</div>
</div>
<!-- Next Column -->
<div class="col-xs-6">
<div class="row">
<p> testhghghjg </p>
</div>
</div>
</div>
</form>
Thank you for your help!