Move validation error message for date picker component

styles/components/_forms.scss

@@ -121,6 +121,11 @@
   margin-top: 10px;
   width: 100%;
 
+  .date-picker-component {
+    float: left;
+    width: 100%;
+  }
+
   label {
     font-weight: 400;
   }
@@ -140,5 +145,10 @@
   .usa-form-group-date-ok {
     padding-top: 30px;
   }
+
+  p.usa-input-error-message {
+    padding-top: 20px;
+    display: inline-block;
+  }
 }
 

templates/components/date_picker.html

@@ -11,13 +11,8 @@
   inline-template>
 
     <div class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
-      <p v-if="!isWithinDateRange" class="usa-input-error-message">
-        {% if maxdate and mindate %}Date must be between {{maxdate.strftime("%Y-%m-%d")}} and {{mindate.strftime("%Y-%m-%d")}}{% endif %}
-        {% if maxdate and not mindate %}Date must be before or on {{maxdate.strftime("%Y-%m-%d")}}{% endif %}
-        {% if mindate and not maxdate %}Date must be after or on {{mindate.strftime("%Y-%m-%d")}}{% endif %}
-      </p>
 
-      <div>
+      <div class="date-picker-component">
         <input v-bind:value="formattedDate" type="hidden" />
 
         <div class="usa-form-group usa-form-group-month">
@@ -62,6 +57,12 @@
           {{ Icon("ok", classes="icon--green") }}
         </div>
       </div>
+
+      <p v-if="!isWithinDateRange" class="usa-input-error-message">
+        {% if maxdate and mindate %}Date must be between {{maxdate.strftime("%Y-%m-%d")}} and {{mindate.strftime("%Y-%m-%d")}}{% endif %}
+        {% if maxdate and not mindate %}Date must be before or on {{maxdate.strftime("%Y-%m-%d")}}{% endif %}
+        {% if mindate and not maxdate %}Date must be after or on {{mindate.strftime("%Y-%m-%d")}}{% endif %}
+      </p>
     </div>
   </date-selector>