Style a locale-safe payment row

Style a payment row that survives long localized labels, bidirectional amounts, text zoom, and narrow layouts without truncating essential values.

EasyResilient CSS

30 min0% acceptance

Description

Style a payment row that survives long localized labels, bidirectional amounts, text zoom, and narrow layouts without truncating essential values. Implement the learner-facing contract completely and satisfy every observable requirement without relying on hidden infrastructure.

Requirements

Use a layout that can reflow challenge-item content at narrow widths.
Allow payment-label to wrap and break long tokens without overlapping siblings.
Keep payment-amount visible, isolated, and untruncated at supported widths.
Use logical alignment and spacing that works in both ltr and rtl documents.
Remain usable at 200 percent text zoom without horizontal page overflow.
Give challenge-control a visible keyboard focus state after reflow.

Long French label

Input

The row is 320px wide

Expected output

The label wraps while amount and Choose remain available

Explanation

Use a layout that can reflow challenge-item content at narrow widths.

RTL document

Input

Direction changes to rtl

Expected output

Logical order and spacing adapt without reversing the amount

Explanation

Allow payment-label to wrap and break long tokens without overlapping siblings.

Constraints

Edit CSS only and keep the supplied shared fixture class names
Support narrow and wide viewports without horizontal page overflow
Preserve visible keyboard focus and readable text in every tested mode

Hints

Hint 1

Start with the responsive-row-layout behavior and make its observable result deterministic.

Hint 2

Model label-wraps-safely independently before combining it with the remaining states.

Hint 3

Verify the boundary described by control-focus-visible without changing caller-owned input.

CSSlocalizationresponsive layout