Bootstrap: плавающие метки с меткой перед полем ввода

Question

Я хочу использовать плавающие метки с некоторыми полями ввода. Формула for основана на Bootstrap 4 стилях, но я не могу изменить структуру элементов.

Я нашел этот пример для плавающих надписей: https://www.cssscript.com/demo/bootstrap-4-form-floating-labels/

Проблема в том, что структура HTML отличается, и в примере поле input предшествует полю label. В моем коде все наоборот, и я не могу изменить эту часть.

Я понял, что CSS в примере работает, только если структура одинакова. Вот код CSS, который не работает с моей структурой:

.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;
}

Ему нужна метка после ввода.

Моя HTML структура выглядит следующим образом:

<p class="form-row form-row-first validate-required" id="billing_first_name_field" data-priority="10">
    <label for="billing_first_name" class="">First Name&nbsp;<abbr class="required" title="required">*</abbr></label>
    <span class="woocommerce-input-wrapper">
        <input type="text" class="input-text form-control" name="billing_first_name" id="billing_first_name" placeholder="" value="First Name" autocomplete="given-name">
    </span>
</p>

Как видите, метка идет перед входом.

Я не мог понять, как это изменить.

Если я заменим CSS на это:

.form-label-group label ~ span input:not(:placeholder-shown) {

Это будет стиль ввода вместо элемента метки.

Есть ли другой способ?