2 files changed, 31 insertions, 20 deletions
diff --git a/ui/app/components/unit-input/index.scss b/ui/app/components/unit-input/index.scss
index 7995696aa..e4075d225 100644
--- a/ui/app/components/unit-input/index.scss
+++ b/ui/app/components/unit-input/index.scss
@@ -1,4 +1,7 @@
 .unit-input {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
   min-height: 54px;
   border: 1px solid #dedede;
   border-radius: 4px;
@@ -24,6 +27,10 @@
     display: none;
   }
 
+  &__inputs {
+    flex: 1 0 auto;
+  }
+
   &__input {
     color: #4d4d4d;
     font-size: 1rem;
diff --git a/ui/app/components/unit-input/unit-input.component.js b/ui/app/components/unit-input/unit-input.component.js
index 0c6b21797..230eecfe6 100644
--- a/ui/app/components/unit-input/unit-input.component.js
+++ b/ui/app/components/unit-input/unit-input.component.js
@@ -11,6 +11,7 @@ import { removeLeadingZeroes } from '../send/send.utils'
 export default class UnitInput extends PureComponent {
   static propTypes = {
     children: PropTypes.node,
+    actionComponent: PropTypes.node,
     error: PropTypes.bool,
     onBlur: PropTypes.func,
     onChange: PropTypes.func,
@@ -70,7 +71,7 @@ export default class UnitInput extends PureComponent {
   }
 
   render () {
-    const { error, placeholder, suffix, children } = this.props
+    const { error, placeholder, suffix, actionComponent, children } = this.props
     const { value } = this.state
 
     return (
@@ -78,26 +79,29 @@ export default class UnitInput extends PureComponent {
         className={classnames('unit-input', { 'unit-input--error': error })}
         onClick={this.handleFocus}
       >
-        <div className="unit-input__input-container">
-          <input
-            type="number"
-            className="unit-input__input"
-            value={value}
-            placeholder={placeholder}
-            onChange={this.handleChange}
-            onBlur={this.handleBlur}
-            style={{ width: this.getInputWidth(value) }}
-            ref={ref => { this.unitInput = ref }}
-          />
-          {
-            suffix && (
-              <div className="unit-input__suffix">
-                { suffix }
-              </div>
-            )
-          }
+        <div className="unit-input__inputs">
+          <div className="unit-input__input-container">
+            <input
+              type="number"
+              className="unit-input__input"
+              value={value}
+              placeholder={placeholder}
+              onChange={this.handleChange}
+              onBlur={this.handleBlur}
+              style={{ width: this.getInputWidth(value) }}
+              ref={ref => { this.unitInput = ref }}
+            />
+            {
+              suffix && (
+                <div className="unit-input__suffix">
+                  { suffix }
+                </div>
+              )
+            }
+          </div>
+          { children }
         </div>
-        { children }
+        {actionComponent}
       </div>
     )
   }