Issue changing WooCommerce coupon label on mobile

Question

I am trying to change the coupon name/label in the WooCommerce cart and checkout tables with:

add_filter( 'woocommerce_cart_totals_coupon_label',  'custom_woocommerce_cart_totals_coupon_label', 10, 2 );
function custom_woocommerce_cart_totals_coupon_label( $label, $coupon ) {
    if ( $coupon->get_code() !== 'coupon1' ) {
        return 'Rabattcode'. strtoupper( $coupon->code );
    }
    return $label;
}

Now I need to add a -class around the actual coupon code name, so strtoupper( $coupon->code ) should be wrapped inside <small></small>. How can I do this?

I tried

return 'Rabattcode'. '<small>' . strtoupper( $coupon->code ) . '</small>';

but this does not work on mobile screens, there the actual HTML is displayed like: Rabattcode<small>COUPON2</small>