keeping 2 elements on the same line in bootstrap

Question

I'm battling to get a dropdownlist and button on the same line in a bootstrap modal. I've tried using <,span> but it doesn't work.

<div class="col-md-12 hSpacerMob">
 <div class="well"> 
        using (Html.BeginForm("AddPlayerSignup", "SignupSheet"))
        {
          @Html.DropDownList("Member", tournament.SignupSheet.GroupMembers)
              <span>
                  @Html.SubmitButton("Add", true, new { @class = "btn btn-primary" })
               </span>
         }
       @Html.ActionLink("Pause", "ChangeState", "SignupSheet", new { Paused = true }, new { @class = "btn btn-warning" })
    </div>
  </div>

So I need the dropdown and 'Add' button on the same line next to each other and the pause button below, but as it stands they're just displayed below each other.

edit: I tried using row but that also does not work

  <div class="row">
    <div class="col-md-6">
        @Html.DropDownList("Member", ladder.SignupSheet.GroupMembers, new {label = "Members", @class = "pull-left form-control", @style = "width:200px"})
    </div>    
    <div class="col-md-6">
        @Html.SubmitButton("Add member", true, new {@class = "btn btn-primary"})
    </div>
</div>

Answer 1

bootstrap has input groups for combining inputs and buttons that you might want to try

<div class="input-group">
  @Html.DropDownList("Member", tournament.SignupSheet.GroupMembers)
  <div class="input-group-btn">
    @Html.SubmitButton("Add", true, new { @class = "btn btn-primary" })
  </div>
</div>