diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade
index a3695a5ea..75cb716fa 100644
--- a/client/components/cards/checklists.jade
+++ b/client/components/cards/checklists.jade
@@ -102,9 +102,9 @@ template(name='checklistItemDetail')
     if canModifyCard
       .check-box-container
         .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
+      if isMiniScreenOrShowDesktopDragHandles
+        span.fa.checklistitem-handle(class="fa-arrows" title="{{_ 'dragChecklistItem'}}")
       .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}")
-        if isMiniScreenOrShowDesktopDragHandles
-          span.fa.checklistitem-handle(class="fa-arrows" title="{{_ 'dragChecklistItem'}}")
         +viewer
           = item.title
     else
diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl
index f6e4f5fd5..8d6afaffb 100644
--- a/client/components/cards/checklists.styl
+++ b/client/components/cards/checklists.styl
@@ -134,7 +134,7 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
     background-color: darken(white, 8%)
 
   .check-box-container
-    padding-right: 1px;
+    padding-right: 10px;
 
   .check-box
     margin: 0.1em 0 0 0;
@@ -144,7 +144,6 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
 
   .item-title
     flex: 1
-    margin-left: 10px;
     &.is-checked
       color: #8c8c8c
       font-style: italic
@@ -157,9 +156,8 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
         max-width: 420px
 
   span.fa.checklistitem-handle
-    float: right
-    padding-right: 20px
-    padding-top: 6px
+    padding-top: 2px
+    padding-right: 10px;
 
 .js-delete-checklist-item
   margin: 0 0 0.5em 1.33em