Есть ли способ «плавать надписи» на кассе woocommerce? (как Shopify)

Question

Я пытаюсь повторить опыт из проверки Shopify на моей странице оформления заказа WooCommerce, анимируя метки, когда пользователь фокусируется на определенном входе, например:

Плавающие метки - изображениеот Мэтта Д. Смита

Я пытался использовать input: focus ~ label, но он не будет работать, потому что вход WooCommerce по умолчанию находится внутри диапазона (.woocommerce-input-wrapper), как это:

<!-- The basic markup for each input -->
<p class="form-row form-row-first validate-required" id="billing_first_name_field" data-priority="10">
    <label for="billing_first_name" class="">Nombre&nbsp;<abbr class="required" title="obligatorio">*</abbr></label>
    <span class="woocommerce-input-wrapper">
        <input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value="" autocomplete="given-name">
    </span>
</p>

<!-- CSS -->
<style>
.woocommerce-billing-fields__field-wrapper .form-row{
    position: relative;
}
.woocommerce-billing-fields__field-wrapper .form-row label{
    position: absolute;
    top: 11px;
    left: 11px;
    padding: 0;
    color: #808080;
    transition: .35s;
}
.woocommerce-billing-fields__field-wrapper .form-row input:focus ~ label{
    top: -8px;
    font-size: 12px;
    font-weight: 500;
}
</style>

Спасибо!