title: Bootstrap: Floating labels with label before input field
body: <p>I want to use floating labels with some input fields.
  The for is based on Bootstrap 4 styles but I can't change the structure of the elements.</p>
  
  <p>I found this example for floating labels: <a href="https://www.cssscript.com/demo/bootstrap-4-form-floating-labels/" rel="nofollow noreferrer">https://www.cssscript.com/demo/bootstrap-4-form-floating-labels/</a></p>
  
  <p>The problem is, that the HTML structure is different and in the example the <code>input</code> field comes before the <code>label</code> field. It's the opposite in my code and I can't change that part.</p>
  
  <p>I figured out, that the CSS in the example works only if the structure is the same.
  Here's the CSS code which doesn't work with my structure:</p>
  
  <pre><code>.form-label-group input:not(:placeholder-shown) ~ label {
    padding-top: calc(var(--input-padding-y) / 3);
    padding-bottom: calc(var(--input-padding-y) / 3);
    font-size: 12px;
    color: blue;
  }
  </code></pre>
  
  <p>It needs the label after the input.</p>
  
  <p>My HTML structure looks like this:</p>
  
  <pre><code>&lt;p class="form-row form-row-first validate-required" id="billing_first_name_field" data-priority="10"&gt;
      &lt;label for="billing_first_name" class=""&gt;First Name&amp;nbsp;&lt;abbr class="required" title="required"&gt;*&lt;/abbr&gt;&lt;/label&gt;
      &lt;span class="woocommerce-input-wrapper"&gt;
          &lt;input type="text" class="input-text form-control" name="billing_first_name" id="billing_first_name" placeholder="" value="First Name" autocomplete="given-name"&gt;
      &lt;/span&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>As you can see, the label comes before the input.</p>
  
  <p>I couldn't figure out how to change that. </p>
  
  <p>If I change the CSS to this:</p>
  
  <pre><code>.form-label-group label ~ span input:not(:placeholder-shown) {
  </code></pre>
  
  <p>It will style the input instead of the label element.</p>
  
  <p>Is there any other way?</p>