Switch hint from span to div

It's possible to pass HTML into the hint component, but this becomes invalid HTML if someone passes a block element in (for example: a <p> tag) as the hint wraps everything in a span.

This commit switches the hint from using a wrapping span to a div, so block elements can be passed in as valid HTML.

src/govuk/components/hint/_index.scss

@@ -16,7 +16,7 @@
  // is unlikely that the default or govuk-label--s class would be used in this
  // case.
 
- // This adjustment will not work in browsers that do not support :not(). 
+ // This adjustment will not work in browsers that do not support :not().
  // Users with these browsers will see the default size margin (5px larger).
 
  .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-hint {
@@ -30,7 +30,7 @@
  // it is unlikely that the default or govuk-fieldset__legend--s class would be
  // used in this case.
 
- // This adjustment will not work in browsers that do not support :not(). 
+ // This adjustment will not work in browsers that do not support :not().
  // Users with these browsers will see the default size margin (5px larger).
 
  .govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl) + .govuk-hint {

src/govuk/components/hint/template.njk

@@ -1,4 +1,4 @@
-<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-hint {%- if params.classes %} {{ params.classes }}{% endif %}"
+<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-hint {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
  {{ params.html | safe if params.html else params.text }}
-</span>
+</div>