# Misaligned Elements

**SHOULD** · **ID:** `design-rams-alignment` · **Category:** design
**Source:** [RAMS](https://www.rams.ai/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-rams-alignment

> SHOULD: Align related elements consistently using a grid system. Left-align text content for readability. Center buttons only when intentionally creating a focal point.

Elements should align to a consistent grid or baseline

The upstream rule is that four-word bullet under "Layout & Spacing"; the explanation is ours. Alignment is the cheapest structure you get for free: shared edges create implicit lines, and the eye uses those lines to decide what belongs together, so a control that sits 3px off the column reads as an error long before anyone can name why. Establish the edges once — a grid, or a flex container with a single alignment rule — and let every child inherit them, instead of nudging individual elements into place with margins. Watch the two places it usually breaks: text and icon on a shared baseline inside a button, and numbers in a table, which should be right-aligned and tabular so the digits line up by place value.

## Bad — do not do this

`design-rams-alignment-bad`

```tsx
export function RamsAlignmentBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Poor Alignment</h4>
        <div className="p-4 bg-muted rounded-lg">
          <div className="flex gap-3 mb-3">
            <div className="p-3 bg-background rounded-lg border border-border w-[45%]">
              <p className="text-sm font-medium">Card A</p>
              <p className="text-xs text-muted-foreground">Description</p>
            </div>
            <div className="p-3 bg-background rounded-lg border border-border w-[40%]">
              <p className="text-sm font-medium">Card B</p>
              <p className="text-xs text-muted-foreground">Description</p>
            </div>
          </div>
          <div className="space-y-2">
            <div className="flex items-center p-2 bg-background rounded ml-2">
              <span className="text-sm">Item One</span>
              <span className="text-sm font-medium ml-auto mr-4">$10</span>
            </div>
            <div className="flex items-center p-2 bg-background rounded">
              <span className="text-sm pl-3">Item Two</span>
              <span className="text-sm font-medium ml-auto">$20</span>
            </div>
          </div>
        </div>
        <div className="mt-3 bg-muted rounded p-2 font-mono text-xs">
          <code className="text-error">Unequal widths, inconsistent margins</code>
        </div>
      </div>
      <p className="text-xs text-error">
        Misaligned elements - looks unpolished
      </p>
    </div>
  );
}
```

## Good — do this

`design-rams-alignment-good`

```tsx
export function RamsAlignmentGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Consistent Alignment</h4>
        <div className="space-y-3 p-4 bg-muted rounded-lg">
          <div className="grid grid-cols-2 gap-3">
            <div className="p-3 bg-background rounded-lg border border-border">
              <p className="text-sm font-medium">Card A</p>
              <p className="text-xs text-muted-foreground">Description</p>
            </div>
            <div className="p-3 bg-background rounded-lg border border-border">
              <p className="text-sm font-medium">Card B</p>
              <p className="text-xs text-muted-foreground">Description</p>
            </div>
          </div>
          <div className="space-y-2">
            <div className="flex justify-between items-center p-2 bg-background rounded">
              <span className="text-sm">Item One</span>
              <span className="text-sm font-medium">$10</span>
            </div>
            <div className="flex justify-between items-center p-2 bg-background rounded">
              <span className="text-sm">Item Two</span>
              <span className="text-sm font-medium">$20</span>
            </div>
          </div>
        </div>
        <div className="mt-3 bg-muted rounded p-2 font-mono text-xs">
          <code>grid-cols-2, flex justify-between items-center</code>
        </div>
      </div>
      <p className="text-xs text-success">
        Elements align to grid - clean and organized
      </p>
    </div>
  );
}
```

## References

- [Rams design review skill](https://rams.ai/rams.md)
- [Flexbox](https://tailwindcss.com/docs/flex)
- [Grid](https://tailwindcss.com/docs/grid-template-columns)