Remove <div>s from big_number text

An accessiblity audit done as part of Notify's
service assessment raised the following problem
with our big_number component.

When you turn CSS off, the sentence in the
component is split onto separate lines.

This was because the number part is wrapped in a
<div> which browsers were interpreting as being a
separate sentence to the label.

So "1 letter", where "letter" is the label, was
seen as:

"1"
"letter"

The accessibility expert consulted on this pointed
out that this would sound confusing for users of
screen readers when moving through the document
sentence by sentence.

These changes:
- make the <div>s into <span>s which are 'phrasing
  content' and so are interpreted as part of the
  same sentence
- change the CSS so the number will still sit
  on top of its label text

The HTML5 spec has a section on how browsers
should arrange text into paragraphs that explains
what was happening in more detail:

https://www.w3.org/TR/html52/dom.html#paragraphs

app/assets/stylesheets/components/big-number.scss

@@ -3,14 +3,17 @@
 
   display: block;
 
+  &-number,
+  &-label {
+    display: block;
+  }
+
   &-number {
     @include bold-48($tabular-numbers: true);
-    display: block;
   }
 
   &-label {
     @include core-19;
-    display: inline-block;
     padding-bottom: 10px;
   }