Master Challenge: Refactoring a 'Div-Soup' Component

Put all semantic HTML principles into practice:

You are auditing a checkout page written by an intern. You find the following markup:

<div class="checkout-box">
  <div class="heading-text">Complete Your Order</div>
  <div class="cart-list">
    <div class="item">Wireless Mouse - $29</div>
    <div class="item">USB-C Hub - $49</div>
  </div>
  <div class="input-box">
    <input type="text" placeholder="Enter Promo Code">
  </div>
  <div class="submit-btn" onclick="submitOrder()">Pay Now</div>
</div>

A screen reader user navigating this component hears: 'Complete Your Order, Wireless Mouse - $29, USB-C Hub - $49, edit text, Pay Now text'. They cannot tell there is a heading, cannot tell there are 2 items in a list, have no persistent label on the promo code, and the 'Pay Now' button cannot be reached or clicked via keyboard!