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">   FIRST NAME</label></br>
      <input type="text" id="NAME" size="20"></br>
      </br>
      <label for="no">   NUMBER</label></br>
      <input type="number" id="no" , size="45"></br>
      </br>
      <label for="age">   AGE</label></br>
      <input type="number" id="age" size="45"></br>
      </br>
      <label for="S_NO:">   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

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/
<br> or <br />, not </ br> and removed them after labelsAlso, 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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With