Make things line up on the usage page

The mixture of three column/two column layouts on this page has always
looked a bit disjointed. And since the left column will only even
contain the names of months, which are short, it doesn’t need a full
half of the page width.

app/assets/stylesheets/components/table.scss

@@ -98,6 +98,20 @@
 
 }
 
+.usage-table {
+
+  .table-field-heading-first {
+    width: 35%;  // 33.33% + fudge
+  }
+
+  .table-row {
+    th {
+      width: 17.5%  // 16.67% + fudge
+    }
+  }
+
+}
+
 %table-field,
 .table-field {
 

app/templates/views/usage-with-letters.html

@@ -78,7 +78,7 @@
       </div>
 
       {% if months %}
-        <div class="dashboard-table body-copy-table">
+        <div class="dashboard-table usage-table body-copy-table">
           {% call(month, row_index) list_table(
             months,
             caption="Total spend",
@@ -124,12 +124,12 @@
     </div>
 
     <div class="grid-row">
-      <div class="column-half">
+      <div class="column-one-third">
         <p class="align-with-heading-copy">
-          Financial year ends 31 March.
+          Financial year ends 31&nbsp;March
         </p>
       </div>
-      <div class="column-half">
+      <div class="column-two-thirds">
         <p class="align-with-heading-copy">
           What counts as 1 text message?<br />
           See <a href="{{ url_for('.pricing') }}">pricing</a>.