title: How to arrange html label and input side by side
body: <p>I have this few line of <code>html</code> code i want to arrange the <code>label</code> and <code>input</code> side by side with the <code>label</code> on top of the <code>input</code> with <code>css</code> but am not able to work around it. I found similar question <a href="https://stackoverflow.com/questions/3488447/html-form-with-side-by-side-input-fields">here</a>which suggest use of <code>display:inline-block;</code> to achieve that but after including it in my code an not able to do it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id=tk&gt;
    &lt;form action="" , method=""&gt;
      &lt;div id="styleform"&gt;
        &lt;label for="NAME"&gt;&amp;nbsp&amp;nbsp FIRST NAME&lt;/label&gt;&lt;/br&gt;
        &lt;input type="text" id="NAME" size="20"&gt;&lt;/br&gt;
        &lt;/br&gt;
        &lt;label for="no"&gt;&amp;nbsp&amp;nbsp NUMBER&lt;/label&gt;&lt;/br&gt;
        &lt;input type="number" id="no" , size="45"&gt;&lt;/br&gt;
        &lt;/br&gt;
        &lt;label for="age"&gt;&amp;nbsp&amp;nbsp AGE&lt;/label&gt;&lt;/br&gt;
        &lt;input type="number" id="age" size="45"&gt;&lt;/br&gt;
        &lt;/br&gt;
        &lt;label for="S_NO:"&gt;&amp;nbsp&amp;nbsp CODE&lt;/label&gt;&lt;/br&gt;
        &lt;input type="text" id="S_NO:" size="20"&gt;&lt;/br&gt;
        &lt;/br&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I think this kind of easy question for some of you this new be in <code>web development</code> </p>
  
  <p>This how i want it to look like</p>
  
  <p><a href="https://i.stack.imgur.com/D6VYv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D6VYv.png" alt="example"></a></p>