title: Why is this method to align textarea with its label working?
body: <p>I found a <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form#basic_form_styling" rel="nofollow noreferrer">solution</a> to align the top of textarea with the top of its label.</p>
  <p>My question is: the <code>vertical-align</code> property of <code>&lt;label&gt;</code> is still the default value(baseline), so why we can align them on top just by setting the <code>vertical-align</code> property of <code>&lt;textarea&gt;</code> to <code>top</code>?</p>
  <p>Thank you very much!</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Active learning: Implementing our form HTML&lt;/title&gt;
    &lt;style&gt;
      form {
        margin: 0 auto;
        width: 500px;
        padding: 1em;
        border: 1px solid #ccc;
        border-radius: 1em;
      }
  
      ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
  
      form li+li {
        margin-top: 1em;
      }
  
      label {
        width: 90px;
        display: inline-block;
        text-align: right;
      }
  
      input,
      textarea {
        font: 1em sans-serif;
        width: 300px;
        box-sizing: border-box;
        border: 1px solid #999;
        outline: none;
      }
  
      input:focus,
      textarea:focus {
        border-color: #000;
      }
  
      img {
        vertical-align: top;
        width: 150px;
        border: 1px solid blue;
      }
  
      textarea {
        vertical-align: top;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;form action="/my-handling-form-page" method="post"&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;label for="name"&gt;Name:&lt;/label&gt;
          &lt;input type="text" id="name" name="user_name"&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;label for="mail"&gt;E-mail:&lt;/label&gt;
          &lt;input type="email" name="user_email" id="mail"&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;label for="msg"&gt;Message:&lt;/label&gt;
          &lt;textarea name="user_message" id="msg"&gt;&lt;/textarea&gt;
        &lt;/li&gt;
        &lt;li class="button"&gt;
          &lt;button type="submit"&gt;Send your message&lt;/button&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/form&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>