Properly close the span

app/assets/stylesheets/utilities.css

@@ -39,6 +39,7 @@
   .align-start { align-items: start; }
   .align-end { align-items: end; }
 
+  .align-self-center { align-self: center; }
   .align-self-end { align-self: end; }
   .align-self-start { align-self: start; }
 

app/views/cards/display/common/_collection.html.erb

@@ -2,5 +2,6 @@
   <span class="card__id"><%= card.id %></span>
   <span class="card__collection-name">
     <span class="overflow-ellipsis"><%= card.collection.name %></span>
+  </span>
   <%= yield %>
-</label>
+</label>

app/views/cards/display/perma/_collection.html.erb

@@ -1,5 +1,5 @@
 <%= render "cards/display/common/collection", card: card do %>
-  <div class="position-relative txt-small" data-controller="dialog" data-action="keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
+  <div class="align-self-center position-relative txt-small" data-controller="dialog" data-action="keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
     <button class="collection-picker__button btn btn--reversed card__hide-on-index fill-transparent" data-action="click->dialog#open:stop">
       <%= icon_tag "caret-down" %>
       <span class="for-screen-reader">Choose a collection for this card</span>
@@ -8,7 +8,7 @@
     <dialog class="popup panel flex-column align-start gap-half fill-white shadow margin-block-double" data-dialog-target="dialog">
       <%= tag.div class: "max-width full-width", data: {
           action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset",
-          controller: "filter navigable-list", 
+          controller: "filter navigable-list",
           dialog_target: "dialog",
           navigable_list_focus_on_selection_value: false,
 				  navigable_list_actionable_items_value: true } do %>
@@ -34,4 +34,4 @@
       <% end %>
     </dialog>
   </div>
-<% end %>
+<% end %>