roll20-character-sheets-tester/D&D_5e_Reshaped/precompiled/components/character/spellSlotAdjustments.html

<div class="wrap-box spell-slots">
  <div class="shaped-row center vert-center">
    <div class="col-20 wrap-box-label light-label center pad-r-md">{{'LEVEL' | translate}}</div>
    <div class="col-20 wrap-box-label light-label center">{{'CALC' | translate}}</div>
    <div class="col-05 wrap-box-label light-label center pad-l-sm pad-r-sm"></div>
    <div class="col-20 wrap-box-label light-label center">{{'BONUS' | translate}}</div>
    <div class="col-05 center pad-l-sm pad-r-sm"></div>
    <div class="col-20 wrap-box-label light-label center">{{'MAX' | translate}}</div>
  </div>

  <div class="shaped-row center vert-center">
    <div class="col-20 center pad-r-md">{{'1st' | translate}}</div>
    <div class="col-20">
      <span name="attr_spell_slots_l1_calc" class="pseudo-input center border-bottom"></span>
    </div>
    <div class="col-05 center pad-l-sm pad-r-sm">+</div>
    <div class="col-20">
      <input type="number" name="attr_spell_slots_l1_bonus" class="no-spin" value="0" min="0">
    </div>
    <div class="col-05 center pad-l-sm pad-r-sm">=</div>
      <div class="col-20">
        <span name="attr_spell_slots_l1_max" class="pseudo-input center border-bottom"></span>
    </div>
  </div>
  <div class="shaped-row center vert-center">
    <div class="col-20 center pad-r-md">{{'2nd' | translate}}</div>
    <div class="col-20">
      <span name="attr_spell_slots_l2_calc" class="pseudo-input center border-bottom"></span>
    </div>
    <div class="col-05 center pad-l-sm pad-r-sm">+</div>
    <div class="col-20">
      <input type="number" name="attr_spell_slots_l2_bonus" class="no-spin" value="0" min="0">
    </div>
    <div class="col-05 center pad-l-sm pad-r-sm">=</div>
    <div class="col-20">
      <span name="attr_spell_slots_l2_max" class="pseudo-input center border-bottom"></span>
    </div>
  </div>
  <div class="shaped-row center vert-center">
    <div class="col-20 center pad-r-md">{{'3rd' | translate}}</div>
    <div class="col-20">
      <span name="attr_spell_slots_l3_calc" class="pseudo-input center border-bottom"></span>
    </div>
    <div class="col-05 center pad-l-sm pad-r-sm">+</div>
    <div class="col-20">
      <input type="number" name="attr_spell_slots_l3_bonus" class="no-spin" value="0" min="0">
    </div>
    <div class="col-05 center pad-l-sm pad-r-sm">=</div>
    <div class="col-20">
      <span name="attr_spell_slots_l3_max" class="pseudo-input center border-bottom"></span>
    </div>
  </div>
  <div class="shaped-row center vert-center">
    <div class="col-20 center pad-r-md">{{'4th' | translate}}</div>
    <div class="col-20">
      <span name="attr_spell_slots_l4_calc" class="pseudo-input center border-bottom"></span>
    </div>
    <div class="col-05 center pad-l-sm pad-r-sm">+</div>
    <div class="col-20">
      <input type="number" name="attr_spell_slots_l4_bonus" class="no-spin" value="0" min="0">
    </div>
    <div class="col-05 center pad-l-sm pad-r-sm">=</div>
    <div class="col-20">
      <span name="attr_spell_slots_l4_max" class="pseudo-input center border-bottom"></span>
    </div>
  </div>
  <div class="shaped-row center vert-center">
    <div class="col-20 center pad-r-md">{{'5th' | translate}}</div>
    <div class="col-20">
      <span name="attr_spell_slots_l5_calc" class="pseudo-input center border-bottom"></span>
    </div>
    <div class="col-05 center pad-l-sm pad-r-sm">+</div>
    <div class="col-20">
      <input type="number" name="attr_spell_slots_l5_bonus" class="no-spin" value="0" min="0">
    </div>
    <div class="col-05 center pad-l-sm pad-r-sm">=</div>
    <div class="col-20">
      <span name="attr_spell_slots_l5_max" class="pseudo-input center border-bottom"></span>
    </div>
  </div>
  <div class="shaped-row center vert-center">
    <div class="col-20 center pad-r-md">{{'6th' | translate}}</div>
    <div class="col-20">
      <span name="attr_spell_slots_l6_calc" class="pseudo-input center border-bottom"></span>
    </div>
    <div class="col-05 center pad-l-sm pad-r-sm">+</div>
    <div class="col-20">
      <input type="number" name="attr_spell_slots_l6_bonus" class="no-spin" value="0" min="0">
    </div>
    <div class="col-05 center pad-l-sm pad-r-sm">=</div>
    <div class="col-20">
      <span name="attr_spell_slots_l6_max" class="pseudo-input center border-bottom"></span>
    </div>
  </div>
  <div class="shaped-row center vert-center">
    <div class="col-20 center pad-r-md">{{'7th' | translate}}</div>
    <div class="col-20">
      <span name="attr_spell_slots_l7_calc" class="pseudo-input center border-bottom"></span>
    </div>
    <div class="col-05 center pad-l-sm pad-r-sm">+</div>
    <div class="col-20">
      <input type="number" name="attr_spell_slots_l7_bonus" class="no-spin" value="0" min="0">
    </div>
    <div class="col-05 center pad-l-sm pad-r-sm">=</div>
    <div class="col-20">
      <span name="attr_spell_slots_l7_max" class="pseudo-input center border-bottom"></span>
    </div>
  </div>
  <div class="shaped-row center vert-center">
    <div class="col-20 center pad-r-md">{{'8th' | translate}}</div>
    <div class="col-20">
      <span name="attr_spell_slots_l8_calc" class="pseudo-input center border-bottom"></span>
    </div>
    <div class="col-05 center pad-l-sm pad-r-sm">+</div>
    <div class="col-20">
      <input type="number" name="attr_spell_slots_l8_bonus" class="no-spin" value="0" min="0">
    </div>
    <div class="col-05 center pad-l-sm pad-r-sm">=</div>
    <div class="col-20">
      <span name="attr_spell_slots_l8_max" class="pseudo-input center border-bottom"></span>
    </div>
  </div>
  <div class="shaped-row center vert-center">
    <div class="col-20 center pad-r-md">{{'9th' | translate}}</div>
    <div class="col-20">
      <span name="attr_spell_slots_l9_calc" class="pseudo-input center border-bottom"></span>
    </div>
    <div class="col-05 center pad-l-sm pad-r-sm">+</div>
    <div class="col-20">
      <input type="number" name="attr_spell_slots_l9_bonus" class="no-spin" value="0" min="0">
    </div>
    <div class="col-05 center pad-l-sm pad-r-sm">=</div>
    <div class="col-20">
      <span name="attr_spell_slots_l9_max" class="pseudo-input center border-bottom"></span>
    </div>
  </div>

  <div class="wrap-box-title center">
    <span class="spell-slots">{{'SPELL_SLOTS' | translate}}</span>
  </div>
</div>