Shipping cost alignment during checkout

Hello @jorlar1 and welcome to the WooCommerce core forum. That’s going to require a lot of CSS to move that around.

I think I got it right, but not sure since we really don’t support customization of core here. You can try this, all of it needs to go into your style sheet or inside Divi’s CSS section in its panel. You can also add it to Customizer > Additional CSS but make sure to keep it away from any other CSS just in case.

The Initial Move of element in Desktop

.woocommerce-checkout .woocommerce-shipping-methods bdi{
    float:right !important;
    margin-right:9rem;
}

Taking care of Mobile

@media screen and (max-width:40em){
.woocommerce-checkout .woocommerce-shipping-methods bdi{
    margin-right:0.5rem;
  }
}

Taking care of Tables both Portrait & Landscape

@media screen and (min-width:41em) and (max-width:64em){
.woocommerce-checkout .woocommerce-shipping-methods bdi{
    margin-right:3rem;
  }
}

@media only screen 
   and (min-device-width : 768px) 
   and (max-device-width : 1024px) {
.woocommerce-checkout .woocommerce-shipping-methods bdi{
    margin-right:6rem;
  }
}

That should cover it.

Thanks @serafinnyc , it made it look better, appreciate your help !