title: Align label left of toggle switch
body: <p>I have the following code and currently the label shows on the right side of the toggle switch and I would like to have it on its left. The CSS code is part of a file that ideally should not be modified directly, but expanded. Thanks!</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>.switch {
    /* Finetune the switch */
    --height: 18px;
    --width: 40px;
    --border: 2px;
    --font-size: 1em;
    --switch-color-checked: #1795fe;
    --switch-color-unchecked: gray;
    --dot-color-checked: white;
    --dot-color-unchecked: white;
    font-size: var(--size);
  }
  
  .switch label {
    display: block;
    position: relative;
    cursor: pointer;
    padding-left: calc(var(--width) + 1em);
    min-width: var(--width);
    min-height: var(--height);
    /* Switch Background */
    /* Dot */
  }
  
  .switch label::before,
  .switch label::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.25s ease-in-out;
    box-sizing: border-box;
  }
  
  .switch label::before {
    z-index: 1;
    background-color: var(--switch-color-unchecked);
    width: var(--width);
    height: var(--height);
    border-radius: calc(var(--height) * 0.5);
  }
  
  .switch label::after {
    z-index: 2;
    background-color: var(--dot-color-unchecked);
    height: calc(var(--height) - (var(--border) * 2));
    width: calc(var(--height) - (var(--border) * 2));
    transform: translate(var(--border), var(--border));
    border-radius: calc(var(--height) / 2);
  }
  
  .switch input {
    width: 0;
    height: 0;
    visibility: hidden;
    display: none;
  }
  
  .switch input:checked+label::before {
    transition: 0.5s;
    background-color: var(--switch-color-checked);
  }
  
  .switch input:checked+label::after {
    transform: translate(calc(var(--width) - 100% - var(--border)), var(--border));
    background-color: var(--dot-color-checked);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="switch"&gt;
    &lt;input id="switch__input" type="checkbox"&gt;
    &lt;label for="switch__input"&gt;
      I am a label that wants to be on the left
    &lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>