misalignment/wrong ordering of additional info box on mobile

https://daffodil-papaya-w55h.squarespace.com/shop/p/big-bow-bag-in-red password:hello

The additional info section 'blocks' are misaligned on mobile viewing.

I have played with padding to get the bulk of text sat where I want but the text is in two blocks (so two paragraphs sit side by side in desktop). When in mobile, the grey paragraph strays to the left of the screen. Please compare with desktop for better understanding. Can I isolate this part and adjust the padding so they line up?

Current css for mobile below, for clarification I have css on the carousel too but that doesn't seem to be affecting. left in the code for transparency:

/* Smartphones  */
@media screen and (max-width:767px) {
.pdp-gallery-slides{
       width: 100% !important;
       overflow: hidden !important;
  } 
    #pdp .product-details {
  padding-bottom: 0px !important;
  padding-right: 0px;
  }
   #pdp .product-price {
     margin-bottom: -10px !important;
   }
   #pdp .products{
    padding-top: 0 !important;
    padding-left: 0px; 
  }
 

you are so clever! i never would have figured this out, thank you so much