Add styling for height input field

Author: Themitchell

lung_cancer_screening/assets/sass/components/_multi_field_input.scss

@@ -0,0 +1,5 @@
+.multi-field-input__item {
+  display: inline-block;
+  margin-bottom: 0;
+  margin-right: 24px;
+}

lung_cancer_screening/assets/sass/main.scss

@@ -2,4 +2,4 @@
 @forward "nhsuk-frontend/dist/nhsuk";
 
 // Components that are not in the NHS.UK frontend library
-// @import "components/button";
+@forward "components/multi_field_input";

lung_cancer_screening/core/jinja2/forms/imperial-height-input.jinja

@@ -6,34 +6,39 @@
 {% set unbound_field = field.field %}
 {% set hint = unbound_field.hint %}
 
+<div id="{{ field.html_name }}" class="multi-field-input">
+  <div class="multi-field-input__item">
+    {{ input({
+      "label": {
+        "text": "Feet",
+        "classes": "nhsuk-fieldset__legend--m",
+        "isPageHeading": false
+      },
+      "hint": {
+        "text": unbound_field.hint
+      } if unbound_field.hint,
+      "errorMessage": error_message,
+      "id": field.auto_id,
+      "name": field.html_name + "_0",
+      "value": field.subwidgets.0.data.value,
+      "classes": "nhsuk-input--width-2",
+      "type": "number"
+    }) }}
+  </div>
 
-{{ input({
-  "label": {
-    "text": "Feet",
-    "classes": "nhsuk-fieldset__legend--m",
-    "isPageHeading": false
-  },
-  "hint": {
-    "text": unbound_field.hint
-  } if unbound_field.hint,
-  "errorMessage": error_message,
-  "id": field.auto_id,
-  "name": field.html_name + "_0",
-  "value": field.subwidgets.0.data.value,
-  "classes": "nhsuk-input--width-2",
-  "type": "number"
-}) }}
-
-{{ input({
-  "label": {
-    "text": "Inches",
-    "classes": "nhsuk-fieldset__legend--m",
-    "isPageHeading": false
-  },
-  "errorMessage": error_message,
-  "id": field.auto_id + "_1",
-  "name": field.html_name + "_1",
-  "value": field.subwidgets.1.data.value,
-  "classes": "nhsuk-input--width-2",
-  "type": "number"
-}) }}
+  <div class="multi-field-input__item">
+    {{ input({
+      "label": {
+        "text": "Inches",
+        "classes": "nhsuk-fieldset__legend--m",
+        "isPageHeading": false
+      },
+      "errorMessage": error_message,
+      "id": field.auto_id + "_1",
+      "name": field.html_name + "_1",
+      "value": field.subwidgets.1.data.value,
+      "classes": "nhsuk-input--width-2",
+      "type": "number"
+    }) }}
+  </div>
+</div>