Make quantity and costprice inputs display in a row on mobile

supply.html

@@ -1235,10 +1235,33 @@
                 align-items: stretch;
             }
             
-            .spec-value,
+            .spec-value {
+                width: 100%;
+                margin-bottom: 10px;
+            }
+            
+            /* 件数和采购价在手机端显示为一行 */
             .quantity-input,
             .costprice-input {
-                width: 100%;
+                width: calc(50% - 5px);
+                margin-bottom: 0;
+            }
+            
+            /* 创建件数和采购价的容器，让它们在手机端水平排列 */
+            .spec-quantity-pair {
+                position: relative;
+            }
+            
+            /* 调整件数和采购价的排列 */
+            .spec-quantity-pair {
+                display: flex;
+                flex-direction: column;
+            }
+            
+            /* 创建一个容器来容纳件数和采购价输入框 */
+            .quantity-costprice-container {
+                display: flex;
+                gap: 10px;
                 margin-bottom: 10px;
             }
             
@@ -1316,6 +1339,22 @@
             border: 1px solid #f0f0f0;
         }
         
+        /* 调整件数和采购价的排列，让它们在所有设备上都能在一行显示 */
+        .spec-quantity-pair {
+            flex-wrap: wrap;
+        }
+        
+        .spec-value {
+            flex: 1;
+            min-width: 100%;
+        }
+        
+        .quantity-input,
+        .costprice-input {
+            flex: 1;
+            min-width: calc(50% - 5px);
+        }
+        
         .spec-value {
             flex: 1;
             padding: 10px;