Problem description

Implement a card component with a header and body section. The header uses flex to place an avatar and a username. The username should be clamped to two lines using CSS, maintaining proper alignment and responsiveness.

Goal

Clamp a username to two lines inside a nested flexbox row without affecting the layout of its sibling elements.

Constraints

• Use only HTML and CSS.

• Clamp to two lines.

• Layout must remain responsive.

• Avatar must remain fully visible and aligned.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.