How to arrange html label and input side by side - html

Question

I have this few line of html code i want to arrange the label and input side by side with the label on top of the input with css but am not able to work around it. I found similar question herewhich suggest use of display:inline-block; to achieve that but after including it in my code an not able to do it.
body {
background-color: red;
}
input[type=text] {
border: 2px solid black;
border-radius: 4px;
margin-left: 150px;
display: inline-block;
clear: both;
}
input[type=number] {
border: 2px solid black;
border-radius: 4px;
margin-left: 150px;
display: inline-block;
clear: both;
}
<div id=tk>
<form action="" , method="">
<div id="styleform">
<label for="NAME">&nbsp&nbsp FIRST NAME</label></br>
<input type="text" id="NAME" size="20"></br>
</br>
<label for="no">&nbsp&nbsp NUMBER</label></br>
<input type="number" id="no" , size="45"></br>
</br>
<label for="age">&nbsp&nbsp AGE</label></br>
<input type="number" id="age" size="45"></br>
</br>
<label for="S_NO:">&nbsp&nbsp CODE</label></br>
<input type="text" id="S_NO:" size="20"></br>
</br>
</div>
</form>
</div>
I think this kind of easy question for some of you this new be in web development
This how i want it to look like

Answer 1

UPDATE
Updated fiddle after image provided
#LAS You are inserting line breaks, that is part of the problem. I have created this fiddle, fixing several things: https://jsfiddle.net/Lu5k1yk8/6/
Added ; after your spaces
fixed the line breaks (I believe the syntax should be <br> or <br />, not </ br> and removed them after labels
Changed your CSS for the textboxes to inline-table
Increased width of labels so they do not create new lines
Also, I would suggest not using spaces (nbsp;) or <br />'s and instead using CSS to create the correct spaces and line breaks.
Here is a good demonstration of how to use padding and margins: http://www.digizol.com/2006/12/margin-vs-padding-css-properties.html

Answer 2

Just remove br tag and add this to your code
input[type="text"] + label {
display: inline;
}

Answer 3

I think the best way is to take the label and input in a table.enter code here<table>
<tr><th>label</th><td><input type="text"></td></tr></table>

Answer 4

I changed your code a bit, I hope this is what you are looking for:
I set label into an inline-block element and set its min-width to 150px, and removed the margin-left: 150px;.
Also, if you use &nbsp, you need to add a semicolon at the end of it: , and with the </br> you need to add the slash at the end: <br />
body{
background-color: red;
}
label {
display: block;
min-width: 150px;
}
.test {
display: inline-block;
width: 45%;
background-color: white;
border: solid 1px blue;
padding: 5px 10px;
}
input[type=text] {
border: 2px solid black;
border-radius: 4px;
display: inline-block;
clear: both;
}
input[type=number] {
border: 2px solid black;
border-radius: 4px;
display: inline-block;
clear: both;
}
<div id=tk>
<form action="", method="">
<div id="styleform">
<div class="test">
<label for="NAME" >FIRST NAME</label>
<input type="text" id="NAME" size="20"><br /><br />
</div>
<div class="test">
<label for="no" >NUMBER</label>
<input type="number" id="no", size="45"><br /><br />
</div>
<div class="test">
<label for="age" >AGE</label>
<input type="number" id="age" size="45"><br /><br />
</div>
<div class="test">
<label for="S_NO:" >CODE</label>
<input type="text" id="S_NO:" size="20"><br /><br />
</div>
</div>
</form>
</div>
**EDIT: ** I have changed the code. Hope this helps you this time ;)
Hope this helps.

Answer 5

Do you mean something like this?
.block {
display: block;
}
.inline-block {
display: inline-block;
width: 49%;
}
body {
padding: 10px;
}
<div id=tk>
<form action="" method="">
<div id="styleform">
<div class="inline-block">
<label class="block" for="NAME">FIRST NAME</label>
<input class="block" type="text" id="NAME" size="20">
</div>
<div class="inline-block">
<label class="block" for="no">NUMBER</label>
<input class="block" type="number" id="no" , size="45">
</div>
<div class="inline-block">
<label for="age" class="block" >AGE</label>
<input type="number" class="block" id="age" size="45">
</div>
<div class="inline-block">
<label class="block" for="S_NO:">CODE</label>
<input type="text" class="block" id="S_NO:" size="20">
</div>
</div>
</form>
</div>