merge value and its unit

libs/remix-ui/run-tab/src/lib/components/value.tsx

@@ -49,7 +49,7 @@ export function ValueUI(props: ValueProps) {
       <label className="udapp_settingsLabel" data-id="remixDRValueLabel">
         <FormattedMessage id="udapp.value" />
       </label>
-      <div className="udapp_gasValueContainer">
+      <div className="input-group udapp_gasValueContainer">
         <CustomTooltip placement={'top-start'} tooltipClasses="text-nowrap" tooltipId="remixValueTooltip" tooltipText={<FormattedMessage id="udapp.tooltipText5" />}>
           <input
             ref={inputValue}
@@ -57,36 +57,37 @@ export function ValueUI(props: ValueProps) {
             min="0"
             pattern="^[0-9]"
             step="1"
-            className="form-control udapp_gasNval udapp_col2"
+            className="form-control"
             id="value"
             data-id="dandrValue"
             onChange={validateValue}
             value={props.sendValue}
           />
         </CustomTooltip>
-
-        <select
-          name="unit"
-          value={props.sendUnit}
-          className="form-control p-1 udapp_gasNvalUnit udapp_col2_2 custom-select"
-          id="unit"
-          onChange={(e) => {
-            props.setUnit(e.target.value as 'ether' | 'finney' | 'gwei' | 'wei')
-          }}
-        >
-          <option data-unit="wei" value="wei">
-            Wei
-          </option>
-          <option data-unit="gwei" value="gwei">
-            Gwei
-          </option>
-          <option data-unit="finney" value="finney">
-            Finney
-          </option>
-          <option data-unit="ether" value="ether">
-            Ether
-          </option>
-        </select>
+        <div className="input-group-append">
+          <select
+            name="unit"
+            value={props.sendUnit}
+            className="custom-select"
+            id="unit"
+            onChange={(e) => {
+              props.setUnit(e.target.value as 'ether' | 'finney' | 'gwei' | 'wei')
+            }}
+          >
+            <option data-unit="wei" value="wei">
+              Wei
+            </option>
+            <option data-unit="gwei" value="gwei">
+              Gwei
+            </option>
+            <option data-unit="finney" value="finney">
+              Finney
+            </option>
+            <option data-unit="ether" value="ether">
+              Ether
+            </option>
+          </select>
+        </div>
       </div>
     </div>
   )