Separate form into two columns - asp.net-mvc

Question

I tried splitting this form into two columns from another ticket I found on here but it is not working correctly. (technically four columns - column one left labels, column two left fields, column three right labels, column four right fields). Unfortunately, it is all messed up. Here is my view:
#using (Html.BeginForm("EditTechTicket", "Ticket", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="container">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<form class="form-large">
<div class="left-col">
<div class="form-group">
#Html.LabelFor(model => model.OpenUserId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<span style="font-weight:normal;">#Html.DisplayFor(model => model.OpenUser.FullName)</span>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.OpenDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<span style="font-weight:normal;">#Html.DisplayFor(model => model.OpenDate)</span>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CloseDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<span style="font-weight:normal;">#Html.DisplayFor(model => model.CloseDate)</span>
</div>
</div>
</div>
<div class="right-col">
<div class="form-group">
#Html.LabelFor(model => model.CategoryId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<span style="font-weight:normal;">#Html.DropDownList("CategoryId", null, htmlAttributes: new { #class = "form-control" })</span>
#Html.ValidationMessageFor(model => model.CategoryId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.TechnicianId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<span style="font-weight:normal;">#Html.DropDownList("TechnicianId", null, htmlAttributes: new { #class = "form-control" })</span>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.TicketStatusId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<span style="font-weight:normal;">#Html.DropDownList("TicketStatusId", null, htmlAttributes: new { #class = "form-control" })</span>
#*<span style="font-weight:normal;">#Html.DropDownListFor(model => model.TicketStatus, (IEnumerable<SelectListItem>)ViewBag.StatusId)</span>*#
</div>
</div>
</div>
</form>
<hr />
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Update" class="btn btn-default" />
</div>
</div>
</div>
}
and here is the code I added to my bootstrap.css file:
.form-large {
/*max-width: 884px;*/
padding: 15px 15px 10px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #d6d6d6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.left-col {
/*display: inline-block;*/
width: 442px;
}
.right-col {
/*display: inline-block;*/
width: 442px;
}
Here is the rendered code:
<form action="/Ticket/EditTechTicket/f2780334-6f2b-4a68-8733-a8d7d6cd28cc" method="post"><input name="__RequestVerificationToken" type="hidden" value="9yy11Toj0Cg4Tse3jDfhf6L8ETk651NHGW_t-u0wWIlsgmzBS6ay7sk0eJif1pmr0tFT5dYyXxvJwMRnIxiJ2ZmfrChgnXVZlJgZQR9-0GM1" /> <div class="container">
<hr />
<form class="form-large">
<div class="left-col">
<div class="form-group">
<label class="control-label col-md-2" for="OpenUserId">Ticket Owner</label>
<div class="col-md-10">
<span style="font-weight:normal;">Daniel Blois</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="OpenDate">Opened</label>
<div class="col-md-10">
<span style="font-weight:normal;">5/26/2015</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="CloseDate">Closed</label>
<div class="col-md-10">
<span style="font-weight:normal;">5/26/2015</span>
</div>
</div>
</div>
<div class="right-col">
<div class="form-group">
<label class="control-label col-md-2" for="CategoryId">Category</label>
<div class="col-md-10">
<span style="font-weight:normal;"><select class="form-control" id="CategoryId" name="CategoryId"><option value="00000000-0000-0000-0000-000000000000">Microsoft Office</option>
</select></span>
<span class="field-validation-valid text-danger" data-valmsg-for="CategoryId" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="TechnicianId">Technician</label>
<div class="col-md-10">
<span style="font-weight:normal;"><select class="form-control" id="TechnicianId" name="TechnicianId"><option value="00000000-0000-0000-0000-000000000000">Daniel Blois</option>
<option value="999600fc-709e-4463-84ad-d26894babb54">Mike Smith</option>
</select></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="TicketStatusId">Status</label>
<div class="col-md-10">
<span style="font-weight:normal;"><select class="form-control" id="TicketStatusId" name="TicketStatusId"><option value="00000000-0000-0000-0000-000000000000">Active</option>
<option value="a297c792-1224-4605-8a72-48d218d569e6">Deffered</option>
<option value="553f4c93-4a72-44bd-a9ce-fab4f87d4e08">Closed</option>
</select></span>
</div>
</div>
</div>
</form>
<hr />
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Update" class="btn btn-default" />
</div>
</div>
</div>
</form>

Answer 1

I assumed like this way...DEMO
HTML Part:
<div class="col-md-12 col-xs-12" >
<div class="col-md-6 col-xs-6">
<div class="col-md-4 col-xs-4">
<label for="exampleInputName">Ticket Owner</label></div>
<div class="col-md-4 col-xs-4">
<label for="exampleInputName2">Daniel Blois</label>
</div></div>
<div class="col-md-6 col-xs-6">
<div class="col-md-4 col-xs-4">
<label for="exampleInputEmail2">Opened</label>
</div>
<div class="col-md-4 col-xs-4">
<label for="exampleInputEmail2">5/26/2015</label>
</div></div>
</div>
<div class="col-md-12 col-xs-12" >
<div class="col-md-6 col-xs-6">
<div class="col-md-4 col-xs-4">
<label for="exampleInputName2">Closed</label></div>
<div class="col-md-4 col-xs-4">
<label for="exampleInputName2">5/26/2015</label></div></div>
<div class="col-md-6 col-xs-6">
<div class="col-md-4 col-xs-4">
<label for="exampleInputEmail2">Category</label>
</div>
<div class="col-md-4 col-xs-4">
<select class="form-control" id="CategoryId" name="CategoryId"><option value="00000000-0000-0000-0000-000000000000">Microsoft Office</option>
</select>
</div></div>
</div>
<div class="col-md-12 col-xs-12" >
<div class="col-md-6 col-xs-6">
<div class="col-md-4 col-xs-4">
<label for="exampleInputEmail2">Technician</label>
</div>
<div class="col-md-4 col-xs-4">
<select class="form-control" id="CategoryId" name="CategoryId"><option value="00000000-0000-0000-0000-000000000000">Microsoft Office</option>
</select>
</div></div>
<div class="col-md-6 col-xs-6">
<div class="col-md-4 col-xs-4">
<label for="exampleInputEmail2">Status</label>
</div>
<div class="col-md-4 col-xs-4">
<select class="form-control" id="CategoryId" name="CategoryId"><option value="00000000-0000-0000-0000-000000000000">Microsoft Office</option>
</select>
</div></div>
</div>
Add this CSS
.col-xs-12{margin-bottom: 5px;}
.col-md-12 {margin-bottom: 5px;}