put Button and text box in parallel - html

Question

Im trying to put the following button and text box in parallel that the button in the left side and the text box in the right ,I try with span and margin but currently the text box is under the button ,how should I do that>
<span>
<input type="submit" id="Connect" style="margin-left: 195px; width: 150px;" class="btn action-but" />
<div class="form-group">
#Html.LabelFor(model => model.Service, new { #class = "col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.Service, new { #style = "width: 700px;" })
#Html.ValidationMessageFor(model => model.Service)
</div>
</div>
</span>

Answer 1

If i understand good you want to show something like this:
[button] [label text errors]
To do that a easy way is to add in style: display: inline-block;
The result, based on your code will be something like this
<span>
<input type="submit" id="Connect" style="display: inline-block;margin-left: 195px; width: 150px;" class="btn action-but" />
<div class="form-group" style="display: inline-block;">
#Html.LabelFor(model => model.Service, new { #class = "col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.Service, new { #style = "width: 700px;" })
#Html.ValidationMessageFor(model => model.Service)
</div>
</div>
</span>
You can find in JsFiddle a demo of this: http://jsfiddle.net/pR6Wg/

Answer 2

I think you are looking for vertical form. look at this example bootstrap vertical form
Razor example
<form class="form-inline" role="form">
<div class="form-group">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">#</div>
#Html.TextBoxFor(model => model.Service, new { #class="form-control", #placeholder="Enter email" })
</div>
</div>
</form>

Answer 3

Remove margin-left: 195px of submit button add add it inside .col-md-2 before the label.
and change <div class="col-md-10"> to <div class="col-md-8">
DEMO
CODE
<span>
<div class="form-group">
<div class="col-md-2">
<input type="submit" id="Connect" style=" width: 150px;" class="btn action-but" />
</div>
#Html.LabelFor(model => model.Service, new { #class = "col-md-2" })
<div class="col-md-8">
#Html.TextBoxFor(model => model.Service, new { #style = "width: 700px;" })
#Html.ValidationMessageFor(model => model.Service)
</div>
</div>
</span>

Answer 4

Why don't use a table? Or you want to do it with div's?
<table class="col-md-10">
<td>
<tr>
#Html.TextBoxFor(model => model.Service, new { #style = "width: 700px;" })
</tr>
</td>
<td>
<tr>
#Html.ValidationMessageFor(model => model.Service)
</tr>
</td>
</table>
Hope it helps! =)