Use CSS grid instead of floats for item page info

I'm planning to mess with this layout a bit, I don't want floats
getting in my way!

app/assets/stylesheets/items/_show.sass

@@ -16,17 +16,20 @@ body.items-show
 
     #item-thumbnail
       grid-area: img
+
       border: 1px solid $module-border-color
       height: 80px
       width: 80px
 
     #item-name
       grid-area: name
+
       text-align: left
       line-height: 100%
       
     #item-links
       grid-area: links
+
       text-align: left
       a
         font-size: 75%
@@ -35,6 +38,15 @@ body.items-show
   #item-name
     margin-bottom: 0
 
+  #item-info-section
+    display: grid
+
+    grid-template-areas: "info form"
+    grid-template-columns: 1fr auto
+
+    #item-info
+      grid-area: info
+    
       #item-zones
         font:
           family: $text-font
@@ -47,6 +59,52 @@ body.items-show
           &:first-child
             margin-right: 1em
 
+    #your-items-form
+      grid-area: form
+
+      border: 1px solid $module-border-color
+      font-size: 85%
+      margin-bottom: 3em
+      margin-left: 1em
+      padding: 1em
+      width: 30em
+      
+      // compete with #trade-hangers
+      position: relative
+      z-index: 2
+
+      h3
+        font-size: 150%
+        font-weight: bold
+        margin-bottom: .25em
+      
+      #closet-hangers-ownership-groups
+        +clearfix
+        margin-bottom: .5em
+      
+        div
+          float: left
+          margin: 0 5%
+          text-align: left
+          width: 40%
+          
+          li
+            list-style: none
+            word-wrap: break-word
+            
+            label.unlisted
+              font-style: italic
+
+      form
+        padding: .5em 0
+
+      select
+        width: 9em
+
+      input[type=number]
+        margin-right: .5em
+        width: 3em
+          
     #trade-hangers
       font-size: 85%
       margin-bottom: 3em
@@ -112,51 +170,6 @@ body.items-show
     height: 16px
     width: 16px
 
-  #closet-hangers
-    border: 1px solid $module-border-color
-    float: right
-    font-size: 85%
-    margin-bottom: 3em
-    margin-left: 1em
-    padding: 1em
-    width: 30em
-    
-    // compete with #trade-hangers
-    position: relative
-    z-index: 2
-
-    h3
-      font-size: 150%
-      font-weight: bold
-      margin-bottom: .25em
-    
-    #closet-hangers-ownership-groups
-      +clearfix
-      margin-bottom: .5em
-    
-      div
-        float: left
-        margin: 0 5%
-        text-align: left
-        width: 40%
-        
-        li
-          list-style: none
-          word-wrap: break-word
-          
-          label.unlisted
-            font-style: italic
-
-    form
-      padding: .5em 0
-
-    select
-      width: 9em
-
-    input[type=number]
-      margin-right: .5em
-      width: 3em
-
   &.js
     #trade-hangers
       p

app/views/items/show.html.haml

@@ -19,8 +19,33 @@
       = link_to t('.resources.trading_post'), trading_post_url_for(@item)
       = link_to t('.resources.auction_genie'), auction_genie_url_for(@item)
 
-- if user_signed_in?
+%section#item-info-section
-  #closet-hangers
+  #item-info
+    %p= @item.description
+
+    #item-zones
+      %p
+        %strong #{t '.zones.occupied_header'}:
+        = list_zones @occupied_zones, :uncertain_label
+      %p
+        %strong #{t '.zones.restricted_header'}:
+        - if @restricted_zones.empty?
+          = t '.zones.none'
+        - else
+          = list_zones @restricted_zones
+
+    #trade-hangers
+      - [true, false].each do |owned|
+        %p
+          %strong
+            = trading_closet_hangers_header(owned, @trading_closet_hangers_by_owned[owned].size)
+          = render_trading_closet_hangers(owned)
+          %span.toggle
+            %span.more= t '.trading_closet_hangers.show_more'
+            %span.less= t '.trading_closet_hangers.show_less'
+
+  - if user_signed_in?
+    #your-items-form
       %h3
         = t '.closet_hangers.header_html',
             :user_items_link => link_to(t('your_items'),
@@ -50,29 +75,6 @@
                                 t('.closet_hangers.quantity_label')
         = submit_tag t('.closet_hangers.submit')
 
-%p= @item.description
-
-#item-zones
-  %p
-    %strong #{t '.zones.occupied_header'}:
-    = list_zones @occupied_zones, :uncertain_label
-  %p
-    %strong #{t '.zones.restricted_header'}:
-    - if @restricted_zones.empty?
-      = t '.zones.none'
-    - else
-      = list_zones @restricted_zones
-
-#trade-hangers
-  - [true, false].each do |owned|
-    %p
-      %strong
-        = trading_closet_hangers_header(owned, @trading_closet_hangers_by_owned[owned].size)
-      = render_trading_closet_hangers(owned)
-      %span.toggle
-        %span.more= t '.trading_closet_hangers.show_more'
-        %span.less= t '.trading_closet_hangers.show_less'
-
 #outfit-preview-root{'data-item-id': @item.id}
 
 - unless @contributors_with_counts.empty?