Add inline description list variant

[precious-onyenaucheya-ons]

What is the context of this PR?

ONSDESYS-189....

Created new Description list variant as per the Figma.

Prototype link

How to review this PR

Check that new example-inline-description-list in Description List component matches the figma design

Checklist

This needs to be completed by the person raising the PR.

• I have selected the correct Assignee
• I have linked the correct Issue

[netlify]

✅ Deploy Preview for ons-design-system-preview ready!

Name	Link
🔨 Latest commit	8f45296
🔍 Latest deploy log	https://app.netlify.com/sites/ons-design-system-preview/deploys/6756e33b13689c000946f7bd
😎 Deploy Preview	https://deploy-preview-3439--ons-design-system-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[rmccar]

Looks like its possible for the colon to wrap onto another line

[rmccar]

I think we need to check on how this behaves with smaller screens with Joe, the figma still has it behave like this

but the document list that we have at the moment behaves like this

We may need to adjust the breakpoints

[admilne]

I think the use of dt and dd tags are breaking the style from the prototype. At the moment this is forcing the text to wrap in a way different to the prototype. Look at the 'Business' column in this example.

This is the example in the prototype. You can see from the code that they are using a span tag for the 'Business' column and then just test for information about the release - so the text will wrap underneath 'Business'

[precious-onyenaucheya-ons]

I think we need to check on how this behaves with smaller screens with Joe, the figma still has it behave like this but the document list that we have at the moment behaves like this We may need to adjust the breakpoints

I confirmed from Joe and I have updated it to fit with the figma

[rmccar]

This is the prototype with a screen width of about 950px:

This is your branch with a screen width of about 950px:

We need to check this is correct because it isn't quite the same at the prototype

[rmccar]

This change to columns is now causing this issue

[rmccar]

I think you need to revert the col change otherwise we are getting this. And in this case I think the wrapping is probably the better of the two so we should remove white-space: nowrap;