Improvements to send SMS page

- make messages align horizontally
- change wording of step 2 (from Lorena)

app/assets/stylesheets/components/placeholder.scss

@@ -2,6 +2,7 @@
   display: inline;
   background: $light-blue;
   color: $white;
+  white-space: nowrap;
   padding: 0 5px;
   border-radius: 3px;
 }

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

@@ -10,17 +10,22 @@
     white-space: nowrap;
     clear: both;
 
-    .block-label {
-      float: none;
-      clear: none;
-      display: inline-block;
-      margin-right: 10px;
+    &-radio {
+      padding-right: 10px;
+      box-sizing: border-box;
       vertical-align: top;
+      width: 33%;
+      display: inline-block;
+    }
+
+    .block-label {
+      display: inline-block;
     }
 
     .sms-message {
       display: inline-block;
       vertical-align: top;
+      max-width: 66%;
     }
 
   }

app/assets/stylesheets/main.scss

@@ -33,5 +33,6 @@
 @import "components/sms-message";
 @import "components/button";
 @import "components/table";
+
 // TODO: break this up
 @import "app";

app/templates/views/send-sms.html

@@ -15,10 +15,12 @@
 				<h2 class="heading-medium">1. Choose text message template</h2>
 				{% for template in message_templates %}
 					<div class="template-picker-option">
-						<label class="block-label" for="template-{{loop.index}}">
-							{{ template.name }}
-							<input type="radio" name="template" id="template-{{loop.index}}" value="{{ template.name }}" />
-						</label>
+						<div class="template-picker-option-radio">
+							<label class="block-label" for="template-{{loop.index}}">
+								{{ template.name }}
+								<input type="radio" name="template" id="template-{{loop.index}}" value="{{ template.name }}" />
+							</label>
+						</div>
 						{{ sms_message(template.body) }}
 					</div>
 				{% endfor %}
@@ -30,14 +32,10 @@
 				<h2 class="heading-medium">2. Add recipients</h2>
 
 				<p>
-					Add recipients by uploading a CSV
+					Upload a CSV file to add your recipients’ details.
 				</p>
 				<p>
-					Format the cells as ‘text’ in your spreadsheet app – this stores the mobile
-					numbers correctly
-				</p>
-				<p>
-					You can also <a href="#">download an example</a>
+					You can also <a href="#">download an example CSV</a>.
 				</p>
 				<p>
 					<input type="file" />