[SD-695] Use DL in stats grid markup

[waitingallday]

Issue: https://digital-vic.atlassian.net/browse/SD-695

What I did

• Ideally, the stats blocks would all form one dl but the rules say that a dl can only contain dt and dd els, so there is no way of wrapping them for alignment in flex. I think this (using a dl for each pair) is still correct, but a bit verbose - no difference visually or in size of markup.
• Refactor markup to dl with dt and dd (wrapped in a single div), use border instead of margin/gap

How to test

• Chromatic

Checklist

For all PR's

• I've added relevant changes to the project Readme if needed
• I've updated the documentation site as needed
• I have added tests to cover my changes (if not applicable, please state why in a comment)

For new UI components only

• I have added a storybook story covering all variants
• I have checked a11y tab in storybook passes
• I have added cypress component tests (if the component is interactive)
• Any events are emitted on the event bus using emitRplEvent

[cypress]

ripple-framework    Run #2559

Run Properties:   Passed #2559  •  f14c6b112d: refactor: :recycle: remove inner wrapper

Project	ripple-framework
Branch Review	fix/sd-695-stats-grid-markup
Run status	Passed #2559
Run duration	10m 54s
Commit	f14c6b112d: refactor: :recycle: remove inner wrapper
Committer	Jason Smith
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	1
Pending	0
Skipped	0
Passing	235
View all changes introduced in this branch ↗︎

[dylankelly]

@waitingallday I believe you can wrap the children in a div see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl#wrapping_name-value_groups_in_div_elements