Restyle to use border box

src/components/inputs/ArrayInput.jsx

@@ -18,8 +18,8 @@ class ArrayInput extends React.Component {
   render() {
     const values = this.props.value || this.props.default || []
     const commonStyle = {
-      width: '15%',
-      marginRight: margins[0],
+      width: '49%',
+      marginRight: '1%',
     }
     const inputs = values.map((v, i) => {
       if(this.props.type === 'number') {
@@ -28,7 +28,7 @@ class ArrayInput extends React.Component {
       return <StringInput key={i} value={v} style={commonStyle} />
     })
 
-    return <div style={{display: 'inline-block', width: '51%'}}>
+    return <div style={{display: 'inline-block', width: '50%'}}>
       {inputs}
     </div>
   }

src/components/inputs/AutocompleteInput.jsx

@@ -8,7 +8,8 @@ class AutocompleteInput extends React.Component {
   static propTypes = {
     value: React.PropTypes.string,
     options: React.PropTypes.array,
-    style: React.PropTypes.object,
+    wrapperStyle: React.PropTypes.object,
+    inputStyle: React.PropTypes.object,
     onChange: React.PropTypes.func,
   }
 
@@ -28,11 +29,15 @@ class AutocompleteInput extends React.Component {
         background: colors.gray,
         zIndex: 3,
       }}
+      wrapperStyle={{
+        display: 'inline-block',
+        ...this.props.wrapperStyle
+      }}
       inputProps={{
         style: {
           ...input.input,
-          width: null,
-          ...this.props.style,
+          width: '100%',
+          ...this.props.inputStyle,
         }
       }}
       value={this.props.value}

src/components/inputs/InputBlock.jsx

@@ -15,15 +15,30 @@ class InputBlock extends React.Component {
     return this.props.onChange(value === "" ? null: value)
   }
 
+  renderChildren() {
+    return React.Children.map(this.props.children, child => {
+      return React.cloneElement(child, {
+        style: {
+          ...child.props.style,
+          width: '50%',
+        }
+      })
+    })
+  }
+
   render() {
     return <div style={{
-      display: 'block',
-      marginTop: margins[2],
-      marginBottom: margins[2],
+      ...input.property,
       ...this.props.style,
     }}>
-      <label style={input.label}>{this.props.label}</label>
-      {this.props.children}
+      <label
+        style={{
+          ...input.label,
+          width: '50%',
+      }}>
+        {this.props.label}
+      </label>
+      {this.renderChildren()}
     </div>
   }
 }