Make labels blocks, put next to message templates

app/assets/stylesheets/components/sms-message.scss

@@ -28,14 +28,14 @@
   }
 
   &-wrapper {
+    display: inline-block;
     box-sizing: border-box;
     position: relative;
     z-index: 30;
-    width: 100%;
-    height: 100%;
     padding: $gutter/2;
     background: $panel-colour;
     border-radius: 5px;
+    white-space: normal;
   }
 
 }

app/assets/stylesheets/components/template-picker.scss

@@ -7,9 +7,22 @@
 
   &-option {
 
-    input {
-      float: left;
+    white-space: nowrap;
+    clear: both;
+
+    .block-label {
+      float: none;
+      clear: none;
+      display: inline-block;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .sms-message {
+      display: inline-block;
+      vertical-align: top;
     }
 
   }
+
 }

app/assets/stylesheets/main.scss

@@ -20,6 +20,7 @@
 @import "govuk_elements/public/sass/elements/details";
 @import "govuk_elements/public/sass/elements/elements-typography";
 @import "govuk_elements/public/sass/elements/forms";
+@import "govuk_elements/public/sass/elements/forms/form-block-labels";
 @import "govuk_elements/public/sass/elements/icons";
 @import "govuk_elements/public/sass/elements/layout";
 @import "govuk_elements/public/sass/elements/lists";
@@ -27,9 +28,9 @@
 @import "govuk_elements/public/sass/elements/tables";
 
 // Extra CSS for this application
+@import "components/template-picker";
 @import "components/sms-message";
 @import "components/placeholder";
-@import "components/template-picker";
 @import "components/button";
 @import "components/table";
 

app/templates/views/send-sms.html

@@ -15,16 +15,16 @@
 				<h2 class="heading-medium">1. Choose text message template</h2>
 				{% for template in message_templates %}
 					<div class="template-picker-option">
-						<label>
-							<span class="template-picker-name">{{ template.name }}</span>
-							<input type="radio" name="template" value="{{ template.name }}" />
-							{{ sms_message(template.body) }}
+						<label class="block-label" for="template-{{loop.index}}">
+							{{ template.name }}
+							<input type="radio" name="template" id="template-{{loop.index}}" value="{{ template.name }}" />
 						</label>
+						{{ sms_message(template.body) }}
 					</div>
 				{% endfor %}
 
 				<p>
-					<a href="{{ url_for(".managetemplates") }}">Create a new template</a>
+					<a href="{{ url_for(".managetemplates") }}">Or create a new template</a>
 				</p>
 
 				<h2 class="heading-medium">2. Add recipients</h2>