align text on the same line - html

Question

I have an html which contains 1 label and 1 div box contains a text.
<label class="control-label col-xs-2">Name:</label>
<div class="col-xs-10">
<strong>Test</strong>
</div>
But they seem not located on the same line. Here is the jsfiddle Could anyone help me how can I align them on the same line.
Thanks

Answer 1

I see you are using bootstrap. Bootstrap already has default CSS for labels. so if you don't want that to happen remove the padding from the <label> element.
It will look like this:
.form-horizontal .control-label {
float: left;
width: 160px;
/* padding-top: 5px; */
text-align: right;
}
Hope this helps, Cheers.

Answer 2

Apply padding-top to the col-xs-10 in your CSS.
.col-xs-10 {
padding-top: 5px;
}

Answer 3

Try this
<div class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-xs-2">Name:</label>
<div class="col-xs-10">
<strong>Test</strong>
</div>
</div>
</div>

Answer 4

In bootstrap if you would like to have a horizontal form it is called inline. So, if you change your "form-horizontal" to "form-inline" you will achieve that horizontal key/value pair. Below is the html that I changed to your code. I hope this is what you are looking for.
<div class="form-inline" role="form">
<div class="form-group">
<label for="control-label col-xs-12">Name:</label>
<input type="text" class="form-control col-xs-10" id="control-label"placeholder="text here">
</div>
</div>
In addition, you will notice that I have inserted an input tag. This is what will allow site visitors to input the value.