Separator

<div className="flex h-5 items-center gap-4 text-sm">
  <div>Blog</div>
  <Separator orientation="vertical" />
  <div>Docs</div>
  <Separator orientation="vertical" />
  <div>Source</div>
</div>

<div className="flex items-center gap-2 text-sm md:gap-4">
  <div className="flex flex-col gap-1">
    <span className="font-medium">Settings</span>
    <span className="text-xs text-muted-foreground">
      Manage preferences
    </span>
  </div>
  <Separator orientation="vertical" />
  <div className="flex flex-col gap-1">
    <span className="font-medium">Account</span>
    <span className="text-xs text-muted-foreground">
      Profile & security
    </span>
  </div>
  <Separator orientation="vertical" />
  <div className="flex flex-col gap-1">
    <span className="font-medium">Help</span>
    <span className="text-xs text-muted-foreground">Support & docs</span>
  </div>
</div>

<div className="flex flex-col gap-2 text-sm">
  <dl className="flex items-center justify-between">
    <dt>Item 1</dt>
    <dd className="text-muted-foreground">Value 1</dd>
  </dl>
  <Separator />
  <dl className="flex items-center justify-between">
    <dt>Item 2</dt>
    <dd className="text-muted-foreground">Value 2</dd>
  </dl>
  <Separator />
  <dl className="flex items-center justify-between">
    <dt>Item 3</dt>
    <dd className="text-muted-foreground">Value 3</dd>
  </dl>
</div>