title: How to keep HTML label text next to an input in mobile browser?
body: <p>I use <code>input</code> and <code>label</code> to construct these two controls. They looks good in desktop browsers.</p>
  
  <p><a href="https://i.stack.imgur.com/6cA1q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6cA1q.png" alt="enter image description here"></a></p>
  
  <p>The structure is simply:</p>
  
  <pre><code>&lt;div&gt;  
    &lt;input id=""&gt;&lt;/input&gt;
    &lt;label for=""&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the css, the <code>label</code> is <code>display:inline-block</code>, <code>input</code> and <code>div</code> are <code>display:block</code></p>
  
  <p>But when it is displayed in a mobile browser, it becomes less pleasing</p>
  
  <p><a href="https://i.stack.imgur.com/zOhzX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zOhzX.png" alt="enter image description here"></a></p>
  
  <p>Is there anyway I can force the label to display next to the input?</p>