title: CSS float+align properties produce unexpected results
body: <p>Why does my Favorite starter type dropdown look like this? I want it to be similar to how the email and favorite pokemon generation looks. What does this float right align left thing do exactly?
  <a href="https://i.stack.imgur.com/PolxU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PolxU.png" alt="enter image description here" /></a></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>.form {
    margin: 0 auto;
    width: 300px;
  }
  
  .form input {
    display: inline-block;
    text-align: left;
    float: right;
  }
  
  .form label {
    display: inline-block;
    text-align: right;
    float: left;
  }
  
  body {
    background-color: grey;
    color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;center&gt;
    &lt;h1 id="title"&gt;Pokemon survey&lt;/h1&gt;
    &lt;p id="description"&gt;Everyone likes Pokemon right?&lt;/p&gt;
  &lt;/center&gt;
  
  &lt;div class="form" id="survey-form"&gt;
    &lt;label for="name"&gt;Name: &lt;/label&gt;
    &lt;input type "text" id="name-label" name="Name" placeholder="Enter your name"&gt;&lt;br&gt;&lt;br&gt;
    &lt;label for="email"&gt;Email: &lt;/label&gt;
    &lt;input type="email" id="email-label" name="email" placeholder="Enter your Email"&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;label for "favorite-generation"&gt;Favorite Pokemon generation: &lt;/label&gt;
    &lt;input type="number" id="number" min="1" max="8"&gt;&lt;br&gt;&lt;br&gt;
    &lt;label for="favorite-type" id="dropdown" name="favorite-type"&gt;Favorite starter type:&lt;label&gt;
        &lt;select id="dropdown" name="favorite-type"&gt;
          &lt;option value="fire"&gt;Fire&lt;/option&gt;
          &lt;option value="water"&gt;Water&lt;/option&gt;
          &lt;option value="grass"&gt;Grass&lt;/option&gt;
        &lt;/select&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>