two inline text boxes aligning properly with other controls using bootstrap - asp.net-mvc

Question

I have two form controls in one line and other controls properly aligned using Bootstrap v3.3.4
Could you please help me in aligning the top two controls (drop-down and textbox) with the bottom text boxes.
Thank you in advance
I tried to replicate alignment issue using JSFiddle here: https://jsfiddle.net/bswn9o8g/
Also posting the Image here: http://postimg.org/image/4iawvs0zn/
Here is the HTML code
<div class="form-horizontal">
<h4>SearchVM</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group form-inline">
#Html.LabelFor(model => model.searchBy, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EnumDropDownListFor(model => model.searchBy, "Search By", htmlAttributes: new { #class = "form-control" })
#Html.TextBox("searchByVal", null, htmlAttributes: new { #placeholder = "SID / PID ", #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.FirstName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { #placeholder = "First Name", #class = "form-control" } })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.MiddleName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.MiddleName, new { htmlAttributes = new { #placeholder = "Middle Name", #class = "form-control" } })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.LastName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.LastName, new { htmlAttributes = new { #placeholder = "Last Name", #class = "form-control" } })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DOB, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DOB, new { htmlAttributes = new { #placeholder = "Birth Date", #class = "form-control" } })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CauseNumber, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CauseNumber, new { htmlAttributes = new { #placeholder = "Cause#", #class = "form-control" } })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>

Answer 1

It's not very clear from your question what do you want to achieve, but i think you want to have your dropdown menu and textbox inline and aligned with the other controls of your form.
Here's what you are looking for :
<div class=" form-group form-inline">
<div class="input-group">
<span class="input-group-addon">Search by</span>
<select class="form-control" data-val="true" data-val-required="The Search By field i1 required." id="searchBy" name="searchBy">
<option selected="selected" value="0">SID</option>
<option value="1">PID</option>
</select>
</div>
</div>
and here's the Fiddle link
UPDATE:
Here's what's you'r looking for :
<form class="form-horizontal">
<h4>SearchVM</h4>
<div class="form-group">
<label class="control-label col-md-2" for="email">Email:</label>
<div class="col-md-5">
<select class="form-control" data-val="true" data-val-required="The Search By field is required." id="searchBy" name="searchBy"><option selected="selected" value="0">Search By</option>
<option value="1">SID</option>
<option value="2">PID</option>
</select>
</div>
<div class="col-md-5">
<input class="form-control" id="searchByVal" name="searchByVal" placeholder="SID / PID " type="text" value="" />
</div>
...
And here's the Fiddle