title: Vertically align label and select text to the left
body: <p>I have a simple native <code>label</code> and <code>select</code> elements stacked. But as you can see in the snippet, the label text is not vertically aligned to the select's text on the left side like this</p>
  
  <p><a href="https://i.stack.imgur.com/vpQm4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vpQm4.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>select { 
   display: block;
      width: 100%;
      margin: 0;
      padding: 0;
      max-width: 100%;
      border: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      background-color: transparent;
      background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
        linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0) 100%
        );
      background-repeat: no-repeat, repeat;
      background-position: right 0.7em top 50%, 0 0;
      background-size: 0.65em auto, 100%;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label&gt;Label&lt;/label&gt;
  &lt;select class="select-css"&gt;
                  &lt;option&gt;How to left align this text with label?&lt;/option&gt;
                  &lt;option&gt;Apples&lt;/option&gt;
                  &lt;option&gt;Bananas&lt;/option&gt;
                  &lt;option&gt;Grapes&lt;/option&gt;
                  &lt;option&gt;Oranges&lt;/option&gt;
                &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>EDIT:
  I have currently forced it by using like <code>margin-left: -3px</code> on the <code>select</code> element...</p>