Adding a div wrapper for postcode and city fields on checkout page

can you advise me on where I’m making a mistake?

What I need: I need to add a div wrapper for the ZIP code and city fields on the checkout page. I’m using the woocommerce_form_field_ filter for this.

What is the result: The result is that the wrapper I added is displayed above all checkout fields.

My code:

// wrapper for postcode and city
function viking_wrapper_checkout_postcode_city( $field, $key, $args, $value ): string {

    if( $key === 'billing_postcode' ) {
        $field = '<div class="postcode-city-wrap" data-key="' . $key . '">' . $field;
    }

    if( $key === 'billing_city' ) {
        $field = $field . '</div><!-- eof postcode city wrap ' . $key . ' -->';
    }

    return $field;
}
add_filter( 'woocommerce_form_field_text', 'viking_wrapper_checkout_postcode_city', 65, 4 );

Result:

<div class="woocommerce-billing-fields__field-wrapper">
    <div class="postcode-city-wrap" data-key="billing_postcode"></div><!-- eof postcode city wrap billing_city -->
    ... fields ...
</div>

What I try:

• I searched for similar solutions through Google, and everything I found essentially confirmed that my solution is correct.
• I tried different filter priorities (no change).
• I attempted to add a wrapper only around a single field (same result).
• I also looked for other solutions, but I found only a JavaScript solution, which I don’t want (I tested it but it doesn’t work properly).

Honestly, I couldn’t think of anything else…