Improve usability and design

Render the tags under the input. This way the input is not moved down
when a tag is added.
Render icons under the label. As you can add tags by clicking on the icons,
in this way the input is more related to the icons.

app/assets/stylesheets/_consul_settings.scss

@@ -70,6 +70,8 @@ $pdf-secondary:     #ff9e00;
 
 $outline-focus:     3px solid #ffbf47;
 
+$input-height:      $line-height * 2;
+
 // 2. Foundation settings overrides
 // ---------------------------------
 

app/assets/stylesheets/layout.scss

@@ -1107,7 +1107,7 @@ form {
 
   [type]:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not(.close-button) {
     background: #f8f8f8;
-    height: $line-height * 2;
+    height: $input-height;
     margin-bottom: rem-calc(16);
 
     &.error {

app/assets/stylesheets/sdg/related_list_selector.scss

@@ -10,7 +10,7 @@
     }
   }
 
-  > ul {
+  label + ul {
     list-style: none;
     margin-bottom: 0;
     margin-left: 0;
@@ -25,11 +25,33 @@
       &:focus {
         outline: $outline-focus;
       }
+
+      &:hover {
+        cursor: pointer;
+      }
     }
   }
 
   .input-section {
-    margin-top: $line-height / 2;
+    margin-bottom: 2 * $line-height / 3;
+  }
+
+  .amsify-suggestags-area {
+    position: relative;
+
+    .amsify-suggestags-list {
+      top: $input-height;
+    }
+  }
+
+  .amsify-suggestags-input-area {
+    display: flex;
+    flex-wrap: wrap;
+
+    > input {
+      margin-bottom: $line-height / 4 !important;
+      order: -1;
+    }
   }
 
   .remove-tag {

app/components/sdg/related_list_selector_component.html.erb

@@ -1,4 +1,7 @@
 <div class="sdg-related-list-selector">
+  <div class="input-section">
+    <%= f.label :sdg_related_list %>
+
     <ul aria-label="<%= t("sdg.related_list_selector.goal_list") %>">
       <% goals.each do |goal| %>
         <li data-code="<%= goal.code %>" role="checkbox" aria-checked="<%= checked?(goal.code) %>" tabindex="0">
@@ -7,9 +10,9 @@
       <% end %>
     </ul>
 
-  <div class="input-section">
     <%= f.text_field :sdg_related_list,
                       class: "input",
+                      label: false,
                       placeholder: t("sdg.related_list_selector.placeholder"),
                       hint: t("sdg.related_list_selector.hint"),
                       data: { "suggestions-list": sdg_related_suggestions,