Label peer position for not-placeholder-shown

[b-stead]

I am battling to get the label position once a user has entered data. On page render and at focus the label position is where I want it however once the data has been entered the label drops down and obscures the value.

The template code

<!-- Input field -->
        <input type="{{ field.field.widget.input_type }}" name="{{ field.name }}" id="{{ field.id_for_label }}"
               class="peer w-full px-3 py-2 border border-grayish rounded-md focus:ring-2 focus:ring-primary bg-white text-secondary
                      placeholder-transparent"
               value="{{ field.value|default_if_none:'' }}"
               placeholder="{{ field.label }}"
               oninput="checkInput(this)">

        <!-- Floating Label -->
        <label for="{{ field.id_for_label }}" 
               class="absolute left-3 transition-all duration-200 ease-in-out bg-white px-1 text-gray-500 
                      peer-placeholder-shown:top-0 peer-placeholder-shown:-translate-y-4 peer-placeholder-shown:text-gray-400
                      peer-focus:top-0 peer-focus:-translate-y-4 peer-focus:text-sm peer-focus:text-primary
                      peer-not-placeholder-shown:top-0 peer-not-placeholder-shown:-translate-y-4 peer-not-placeholder-shown:text-sm peer-not-placeholder-shown:text-primary">
            {{ field.label }}
        </label>

on page load and focus

Any help on this would be appreciated

[wongjn]

I wasn't able to recreate the undesired behavior in this Tailwind Play. Please consider providing a Tailwind Play that does exhibit the unexpected behavior.