title: Align label on left and right on top of centered text-input
body: <p>I would like to have the labels aligned one on the left and one on the right of two centered text-inputs that have each 40% width.</p>
  
  <p>Here is how it looks now: <a href="https://jsfiddle.net/bcb4yu5h/2/" rel="nofollow noreferrer">https://jsfiddle.net/bcb4yu5h/2/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>input[type=text] {
      width: 40%;
      padding: 12px 20px;
      margin: 8px 3px;
      box-sizing: border-box;
  }
  
  input[type=text]:focus {
      outline: none;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div style="text-align: center"&gt;
      &lt;label style="float: left" for="fname" &gt;First Name&lt;/label&gt;
      &lt;span&gt;
          &lt;label style="float: right" for="sname" &gt;Second Name&lt;/label&gt;
      &lt;/span&gt;
      &lt;br&gt;
      &lt;input type="text" name="fname"&gt;
      &lt;input type="text" name="sname"&gt;
  &lt;/div&gt;
  </code></pre>