diff --git a/app/views/organizations/_affiliation_fields.html.erb b/app/views/organizations/_affiliation_fields.html.erb
index 9c545c151..c687886a6 100644
--- a/app/views/organizations/_affiliation_fields.html.erb
+++ b/app/views/organizations/_affiliation_fields.html.erb
@@ -1,96 +1,83 @@
 <% if allowed_to?(:manage?, Organization) %>
   <% expired = f.object.inactive? || (f.object.end_date.present? && f.object.end_date < Date.current) %>
   <div data-controller="inactive-toggle">
-    <div class="nested-fields mb-4 rounded-lg border px-3 pt-3 pb-1 <%= expired ? 'bg-gray-100 border-gray-300 opacity-60' : 'bg-white border-gray-200' %>"
+    <div class="nested-fields flex flex-wrap gap-x-4 gap-y-1 items-end mb-4 rounded-lg border p-3 <%= expired ? 'bg-gray-100 border-gray-300 opacity-60' : 'bg-white border-gray-200' %>"
          style="border-left: 4px solid <%= f.object.facilitator? ? '#e879f9' : '#d1d5db' %>"
          <% if f.object.persisted? %>id="<%= dom_id(f.object) %>"<% end %>
          data-inactive-toggle-target="row">
-      <div class="flex gap-x-4 items-start">
-        <div class="shrink-0" style="width: 280px;" data-inactive-toggle-target="profileButton">
-          <% if f.object.persisted? && f.object.person.present? %>
-            <label class="block font-medium text-gray-700 mb-1">Person</label>
-            <% show_email = f.object.person.profile_show_email? || allowed_to?(:manage?, Person) %>
-            <%= person_profile_button(f.object.person, truncate_at: 25, subtitle: (f.object.person.preferred_email if show_email)) %>
-            <%= f.hidden_field :person_id %>
-          <% else %>
-            <label class="block font-medium text-gray-700 mb-1">Person <abbr>*</abbr></label>
-            <div class="rounded-md border border-gray-300 shadow-sm overflow-hidden" style="height: 56px;">
-              <%= f.input :person_id,
-                include_blank: true,
-                required: true,
-                wrapper_html: { class: "mb-0 h-full" },
-                input_html: {
-                  class: "h-full border-0",
-                  data: {
-                    controller: "remote-select",
-                    remote_select_model_value: "person"
-                  }
-                },
-                label: false
-              %>
-            </div>
-          <% end %>
-        </div>
+      <div style="width: 350px; min-width: 350px; flex-shrink: 0;" data-inactive-toggle-target="profileButton">
+        <% if f.object.persisted? && f.object.person.present? %>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Person</label>
+          <% show_email = f.object.person.profile_show_email? || allowed_to?(:manage?, Person) %>
+          <%= person_profile_button(f.object.person, truncate_at: 30, subtitle: (f.object.person.preferred_email if show_email)) %>
+          <%= f.hidden_field :person_id %>
+        <% else %>
+          <%= f.input :person_id,
+            include_blank: true,
+            required: true,
+            input_html: {
+              data: {
+                controller: "remote-select",
+                remote_select_model_value: "person"
+              }
+            },
+            label: "Person"
+          %>
+        <% end %>
+      </div>
+
+      <div class="w-full sm:w-auto" style="min-width: 200px;">
+        <%= f.input :title,
+                    as: :text,
+                    input_html: {
+                      rows: 1,
+                      value: f.object&.title || "Facilitator",
+                      style: "height: 42px; min-height: 42px;",
+                      data: {
+                        inactive_toggle_target: "title",
+                        action: "affiliation-dates#recalculate inactive-toggle#updateBorder"
+                      }
+                    } %>
+      </div>
 
-        <div class="flex-1" style="min-width: 150px;">
-          <%= f.input :title,
-                      as: :text,
-                      wrapper_html: { class: "mb-0" },
-                      input_html: {
-                        rows: 1,
-                        value: f.object&.title || "Facilitator",
-                        style: "height: 56px; min-height: 56px; padding-top: 14px;",
-                        data: {
-                          inactive_toggle_target: "title",
-                          action: "affiliation-dates#recalculate inactive-toggle#updateBorder"
-                        }
-                      } %>
-        </div>
+      <div class="w-full sm:w-auto">
+        <%= f.input :start_date,
+                    as: :string,
+                    label: "Start",
+                    input_html: {
+                      type: "date",
+                      value: (f.object.start_date || (Date.current unless f.object.persisted?))&.strftime("%Y-%m-%d"),
+                      class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
+                      data: { action: "change->affiliation-dates#recalculate" }
+                    } %>
+      </div>
 
-        <div class="shrink-0">
-          <%= f.input :start_date,
-                      as: :string,
-                      label: "Start",
-                      wrapper_html: { class: "mb-0" },
-                      input_html: {
-                        type: "date",
-                        value: (f.object.start_date || (Date.current unless f.object.persisted?))&.strftime("%Y-%m-%d"),
-                        class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
-                        style: "height: 56px;",
-                        data: { action: "change->affiliation-dates#recalculate" }
-                      } %>
-        </div>
+      <div class="w-full sm:w-auto">
+        <%= f.input :end_date,
+                    as: :string,
+                    label: "End",
+                    input_html: {
+                      type: "date",
+                      value: f.object.end_date&.strftime("%Y-%m-%d"),
+                      class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
+                      data: {
+                        inactive_toggle_target: "endDate",
+                        action: "change->inactive-toggle#toggle change->affiliation-dates#recalculate"
+                      }
+                    } %>
+      </div>
 
-        <div class="shrink-0">
-          <%= f.input :end_date,
-                      as: :string,
-                      label: "End",
-                      wrapper_html: { class: "mb-0" },
-                      input_html: {
-                        type: "date",
-                        value: f.object.end_date&.strftime("%Y-%m-%d"),
-                        class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
-                        style: "height: 56px;",
-                        data: {
-                          inactive_toggle_target: "endDate",
-                          action: "change->inactive-toggle#toggle change->affiliation-dates#recalculate"
-                        }
-                      } %>
-        </div>
+      <div class="w-full sm:w-auto pb-3">
+        <label class="block text-sm font-medium text-gray-700 mb-1">Primary contact</label>
+        <%= f.check_box :primary_contact,
+                        checked: f.object.primary_contact? || !f.object.persisted?,
+                        class: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" %>
+      </div>
 
-        <div class="shrink-0 whitespace-nowrap">
-          <label class="block font-medium text-gray-700 mb-1">Primary org contact</label>
-          <div class="pt-2">
-            <%= f.check_box :primary_contact,
-                            checked: f.object.primary_contact? || !f.object.persisted?,
-                            class: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" %>
-          </div>
-          <div class="-mb-2 text-right">
-            <%= link_to_remove_association "Remove",
-                                           f,
-                                           class: "text-sm text-gray-400 hover:text-red-600 underline whitespace-nowrap" %>
-          </div>
-        </div>
+      <div class="w-full text-right admin-only">
+        <%= link_to_remove_association "Remove",
+                                       f,
+                                       class: "text-sm text-gray-400 hover:text-red-600 underline whitespace-nowrap admin-only bg-blue-100 rounded px-2 py-1" %>
       </div>
     </div>
   </div>
diff --git a/app/views/people/_affiliation_fields.html.erb b/app/views/people/_affiliation_fields.html.erb
index c2cf55bfb..06e801e29 100644
--- a/app/views/people/_affiliation_fields.html.erb
+++ b/app/views/people/_affiliation_fields.html.erb
@@ -1,95 +1,85 @@
 <% if allowed_to?(:manage?, Person) %>
   <% expired = f.object.inactive? || (f.object.end_date.present? && f.object.end_date < Date.current) %>
   <div data-controller="inactive-toggle">
-    <div class="nested-fields mb-4 rounded-lg border px-3 pt-3 pb-1 <%= expired ? 'bg-gray-100 border-gray-300 opacity-60' : 'bg-white border-gray-200' %>"
+    <div class="nested-fields flex flex-wrap gap-x-4 gap-y-1 items-end mb-4 rounded-lg border p-3 <%= expired ? 'bg-gray-100 border-gray-300 opacity-60' : 'bg-white border-gray-200' %>"
          style="border-left: 4px solid <%= f.object.facilitator? ? '#e879f9' : '#d1d5db' %>"
          data-inactive-toggle-target="row">
-      <div class="flex gap-x-4 items-start">
-        <div class="shrink-0" style="width: 280px;" data-inactive-toggle-target="profileButton">
-          <% if f.object.persisted? && f.object.organization.present? %>
-            <label class="block font-medium text-gray-700 mb-1">Organization</label>
-            <%= organization_profile_button(f.object.organization, truncate_at: 25) %>
-            <%= f.hidden_field :organization_id %>
-          <% else %>
-            <label class="block font-medium text-gray-700 mb-1">Organization <abbr>*</abbr></label>
-            <div class="rounded-md border border-gray-300 shadow-sm overflow-hidden" style="height: 56px;">
-              <%= f.input :organization_id,
-                include_blank: true,
-                required: true,
-                wrapper_html: { class: "mb-0 h-full" },
-                input_html: {
-                  class: "h-full border-0",
-                  data: {
-                    controller: "remote-select",
-                    remote_select_model_value: "organization"
-                  }
-                },
-                error: "Organization can't be blank",
-                prompt: "Search by name",
-                label: false %>
-            </div>
-          <% end %>
-        </div>
+      <div style="width: 350px; min-width: 350px; flex-shrink: 0;" data-inactive-toggle-target="profileButton">
+        <% if f.object.persisted? && f.object.organization.present? %>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Organization</label>
+          <%= organization_profile_button(f.object.organization, truncate_at: 30) %>
+          <%= f.hidden_field :organization_id %>
+        <% else %>
+          <%= f.input :organization_id,
+            include_blank: true,
+            required: true,
+            input_html: {
+              data: {
+                controller: "remote-select",
+                remote_select_model_value: "organization"
+              }
+            },
+            error: "Organization can't be blank",
+            prompt: "Search by name",
+            label: "Organization",
+            label_html: { class: "block text-sm font-medium text-gray-700 mb-1 " } %>
+        <% end %>
+      </div>
 
-        <div class="flex-1" style="min-width: 150px;">
+      <div class="w-full sm:w-auto" style="min-width: 200px;">
+        <div class="pt-1">
           <%= f.input :title,
                       as: :text,
-                      wrapper_html: { class: "mb-0" },
                       input_html: {
                         rows: 1,
                         value: f.object.title || "Facilitator",
-                        style: "height: 56px; min-height: 56px; padding-top: 14px;",
+                        style: "height: 42px; min-height: 42px;",
                         data: {
                           inactive_toggle_target: "title",
                           action: "affiliation-dates#recalculate inactive-toggle#updateBorder"
                         }
                       } %>
         </div>
+      </div>
 
-        <div class="shrink-0">
-          <%= f.input :start_date,
-                      as: :string,
-                      label: "Start",
-                      wrapper_html: { class: "mb-0" },
-                      input_html: {
-                        type: "date",
-                        value: (f.object.start_date || (Date.current unless f.object.persisted?))&.strftime("%Y-%m-%d"),
-                        class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
-                        style: "height: 56px;",
-                        data: { action: "change->affiliation-dates#recalculate" }
-                      } %>
-        </div>
+      <div class="w-full sm:w-auto">
+        <%= f.input :start_date,
+                    as: :string,
+                    label: "Start",
+                    input_html: {
+                      type: "date",
+                      value: (f.object.start_date || (Date.current unless f.object.persisted?))&.strftime("%Y-%m-%d"),
+                      class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
+                      data: { action: "change->affiliation-dates#recalculate" }
+                    } %>
+      </div>
 
-        <div class="shrink-0">
-          <%= f.input :end_date,
-                      as: :string,
-                      label: "End",
-                      wrapper_html: { class: "mb-0" },
-                      input_html: {
-                        type: "date",
-                        value: f.object.end_date&.strftime("%Y-%m-%d"),
-                        class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
-                        style: "height: 56px;",
-                        data: {
-                          inactive_toggle_target: "endDate",
-                          action: "change->inactive-toggle#toggle change->affiliation-dates#recalculate"
-                        }
-                      } %>
-        </div>
+      <div class="w-full sm:w-auto">
+        <%= f.input :end_date,
+                    as: :string,
+                    label: "End",
+                    input_html: {
+                      type: "date",
+                      value: f.object.end_date&.strftime("%Y-%m-%d"),
+                      class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
+                      data: {
+                        inactive_toggle_target: "endDate",
+                        action: "change->inactive-toggle#toggle change->affiliation-dates#recalculate"
+                      }
+                    } %>
+      </div>
 
-        <div class="shrink-0 whitespace-nowrap">
-          <label class="block font-medium text-gray-700 mb-1">Primary org contact</label>
-          <div class="pt-2">
-            <%= f.check_box :primary_contact,
-                            checked: f.object.primary_contact? || !f.object.persisted?,
-                            class: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" %>
-          </div>
-          <div class="-mb-2 text-right">
-            <%= link_to_remove_association "Remove",
-                                           f,
-                                           class: "text-sm text-gray-400 hover:text-red-600 underline whitespace-nowrap" %>
-          </div>
-        </div>
+      <div class="w-full sm:w-auto pb-3">
+        <label class="block text-sm font-medium text-gray-700 mb-1">Primary contact</label>
+        <%= f.check_box :primary_contact,
+                        checked: f.object.primary_contact? || !f.object.persisted?,
+                        class: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" %>
+      </div>
+
+      <div class="w-full text-right admin-only">
+        <%= link_to_remove_association "Remove",
+                                       f,
+                                       class: "text-sm text-gray-400 hover:text-red-600 underline whitespace-nowrap admin-only bg-blue-100 rounded px-2 py-1" %>
       </div>
     </div>
   </div>