diff --git a/D&D_5e_Reshaped/precompiled/components/npc/abilities.html b/D&D_5e_Reshaped/precompiled/components/npc/abilities.html
index dab3753e84..b40fda8d79 100644
--- a/D&D_5e_Reshaped/precompiled/components/npc/abilities.html
+++ b/D&D_5e_Reshaped/precompiled/components/npc/abilities.html
@@ -11,9 +11,13 @@
     </button>
     <input type="hidden" name="attr_strength_mod">
     <div class="shaped-row center edit no-wrap">
-      <input type="number" name="attr_strength" class="no-border no-spin" accept="STR">
+      <div>
+        <input type="number" name="attr_strength" class="no-border no-spin" accept="STR">
+      </div>
       <div>+</div>
-      <input type="number" name="attr_strength_bonus" class="edit no-spin no-border" value="0" step="1">
+      <div>
+        <input type="number" name="attr_strength_bonus" class="edit no-spin no-border" value="0" step="1">
+      </div>
       <div>
         (<span name="attr_strength_mod_with_sign" class="center"></span>)
       </div>
@@ -23,7 +27,9 @@
       <span class="small-label">{{'CHECK' | translate}}</span>
       <span class="small-label mar-l-sm" name="attr_strength_check_mod"></span>
       <div class="small-label">+</div>
-      <input type="number" name="attr_strength_check_bonus" class="no-spin no-border" value="0" step="1">
+      <div>
+        <input type="number" name="attr_strength_check_bonus" class="no-spin no-border" value="0" step="1">
+      </div>
     </div>
   </div>
   <div class="col-16 center pad-l-sm pad-r-sm">
@@ -38,9 +44,13 @@
     </button>
     <input type="hidden" name="attr_dexterity_mod">
     <div class="shaped-row center edit no-wrap">
-      <input type="number" name="attr_dexterity" class="no-border no-spin" accept="DEX">
+      <div>
+        <input type="number" name="attr_dexterity" class="no-border no-spin" accept="DEX">
+      </div>
       <div>+</div>
-      <input type="number" name="attr_dexterity_bonus" class="edit no-spin no-border" value="0" step="1">
+      <div>
+        <input type="number" name="attr_dexterity_bonus" class="edit no-spin no-border" value="0" step="1">
+      </div>
       <div>
         (<span name="attr_dexterity_mod_with_sign" class="center"></span>)
       </div>
@@ -50,7 +60,9 @@
       <span class="small-label">{{'CHECK' | translate}}</span>
       <span class="small-label mar-l-sm" name="attr_dexterity_check_mod"></span>
       <div class="small-label">+</div>
-      <input type="number" name="attr_dexterity_check_bonus" class="no-spin no-border" value="0" step="1">
+      <div>
+        <input type="number" name="attr_dexterity_check_bonus" class="no-spin no-border" value="0" step="1">
+      </div>
     </div>
   </div>
   <div class="col-16 center pad-l-sm pad-r-sm">
@@ -65,9 +77,13 @@
     </button>
     <input type="hidden" name="attr_constitution_mod">
     <div class="shaped-row center edit no-wrap">
-      <input type="number" name="attr_constitution" class="no-border no-spin" accept="CON">
+      <div>
+        <input type="number" name="attr_constitution" class="no-border no-spin" accept="CON">
+      </div>
       <div>+</div>
-      <input type="number" name="attr_constitution_bonus" class="edit no-spin no-border" value="0" step="1">
+      <div>
+        <input type="number" name="attr_constitution_bonus" class="edit no-spin no-border" value="0" step="1">
+      </div>
       <div>
         (<span name="attr_constitution_mod_with_sign" class="center"></span>)
       </div>
@@ -77,7 +93,9 @@
       <span class="small-label">{{'CHECK' | translate}}</span>
       <span class="small-label mar-l-sm" name="attr_constitution_check_mod"></span>
       <div class="small-label">+</div>
-      <input type="number" name="attr_constitution_check_bonus" class="no-spin no-border" value="0" step="1">
+      <div>
+        <input type="number" name="attr_constitution_check_bonus" class="no-spin no-border" value="0" step="1">
+      </div>
     </div>
   </div>
   <div class="col-16 center pad-l-sm pad-r-sm">
@@ -92,9 +110,13 @@
     </button>
     <input type="hidden" name="attr_intelligence_mod">
     <div class="shaped-row center edit no-wrap">
-      <input type="number" name="attr_intelligence" class="no-border no-spin" accept="INT">
+      <div>
+        <input type="number" name="attr_intelligence" class="no-border no-spin" accept="INT">
+      </div>
       <div>+</div>
-      <input type="number" name="attr_intelligence_bonus" class="edit no-spin no-border" value="0" step="1">
+      <div>
+        <input type="number" name="attr_intelligence_bonus" class="edit no-spin no-border" value="0" step="1">
+      </div>
       <div>
         (<span name="attr_intelligence_mod_with_sign" class="center"></span>)
       </div>
@@ -104,7 +126,9 @@
       <span class="small-label">{{'CHECK' | translate}}</span>
       <span class="small-label mar-l-sm" name="attr_intelligence_check_mod"></span>
       <div class="small-label">+</div>
-      <input type="number" name="attr_intelligence_check_bonus" class="no-spin no-border" value="0" step="1">
+      <div>
+        <input type="number" name="attr_intelligence_check_bonus" class="no-spin no-border" value="0" step="1">
+      </div>
     </div>
   </div>
   <div class="col-16 center pad-l-sm pad-r-sm">
@@ -119,9 +143,13 @@
     </button>
     <input type="hidden" name="attr_wisdom_mod">
     <div class="shaped-row center edit no-wrap">
-      <input type="number" name="attr_wisdom" class="no-border no-spin" accept="WIS">
+      <div>
+        <input type="number" name="attr_wisdom" class="no-border no-spin" accept="WIS">
+      </div>
       <div>+</div>
-      <input type="number" name="attr_wisdom_bonus" class="edit no-spin no-border" value="0" step="1">
+      <div>
+        <input type="number" name="attr_wisdom_bonus" class="edit no-spin no-border" value="0" step="1">
+      </div>
       <div>
         (<span name="attr_wisdom_mod_with_sign" class="center"></span>)
       </div>
@@ -131,7 +159,9 @@
       <span class="small-label">{{'CHECK' | translate}}</span>
       <span class="small-label mar-l-sm" name="attr_wisdom_check_mod"></span>
       <div class="small-label">+</div>
-      <input type="number" name="attr_wisdom_check_bonus" class="no-spin no-border" value="0" step="1">
+      <div>
+        <input type="number" name="attr_wisdom_check_bonus" class="no-spin no-border" value="0" step="1">
+      </div>
     </div>
   </div>
   <div class="col-16 center pad-l-sm">
@@ -146,9 +176,13 @@
     </button>
     <input type="hidden" name="attr_charisma_mod">
     <div class="shaped-row center edit no-wrap">
-      <input type="number" name="attr_charisma" class="no-border no-spin" accept="CHA">
+      <div>
+        <input type="number" name="attr_charisma" class="no-border no-spin" accept="CHA">
+      </div>
       <div>+</div>
-      <input type="number" name="attr_charisma_bonus" class="edit no-spin no-border" value="0" step="1">
+      <div>
+        <input type="number" name="attr_charisma_bonus" class="edit no-spin no-border" value="0" step="1">
+      </div>
       <div>
         (<span name="attr_charisma_mod_with_sign" class="center"></span>)
       </div>
@@ -158,7 +192,9 @@
       <span class="small-label">{{'CHECK' | translate}}</span>
       <span class="small-label mar-l-sm" name="attr_charisma_check_mod"></span>
       <div class="small-label">+</div>
-      <input type="number" name="attr_charisma_check_bonus" class="no-spin no-border" value="0" step="1">
+      <div>
+        <input type="number" name="attr_charisma_check_bonus" class="no-spin no-border" value="0" step="1">
+      </div>
     </div>
   </div>
 </div>
\ No newline at end of file