diff --git a/packages/grafana-ui/src/components/FormGroup/FormField.test.tsx b/packages/grafana-ui/src/components/FormField/FormField.test.tsx
similarity index 100%
rename from packages/grafana-ui/src/components/FormGroup/FormField.test.tsx
rename to packages/grafana-ui/src/components/FormField/FormField.test.tsx
diff --git a/packages/grafana-ui/src/components/FormGroup/FormField.tsx b/packages/grafana-ui/src/components/FormField/FormField.tsx
similarity index 95%
rename from packages/grafana-ui/src/components/FormGroup/FormField.tsx
rename to packages/grafana-ui/src/components/FormField/FormField.tsx
index ae86d4115b0..aa026a74197 100644
--- a/packages/grafana-ui/src/components/FormGroup/FormField.tsx
+++ b/packages/grafana-ui/src/components/FormField/FormField.tsx
@@ -16,7 +16,7 @@ const defaultProps = {
 
 const FormField: FunctionComponent<Props> = ({ label, labelWidth, inputProps, inputWidth }) => {
   return (
-    <div className="gf-form">
+    <div className="form-field">
       <Label width={labelWidth}>{label}</Label>
       <input type="text" className={`gf-form-input width-${inputWidth}`} {...inputProps} />
     </div>
diff --git a/packages/grafana-ui/src/components/FormField/_FormField.scss b/packages/grafana-ui/src/components/FormField/_FormField.scss
new file mode 100644
index 00000000000..36955e2fca6
--- /dev/null
+++ b/packages/grafana-ui/src/components/FormField/_FormField.scss
@@ -0,0 +1,12 @@
+.form-field {
+  margin-bottom: $gf-form-margin;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  text-align: left;
+  position: relative;
+
+  &--grow {
+    flex-grow: 1;
+  }
+}
diff --git a/packages/grafana-ui/src/components/FormGroup/__snapshots__/FormGroup.test.tsx.snap b/packages/grafana-ui/src/components/FormField/__snapshots__/FormField.test.tsx.snap
similarity index 100%
rename from packages/grafana-ui/src/components/FormGroup/__snapshots__/FormGroup.test.tsx.snap
rename to packages/grafana-ui/src/components/FormField/__snapshots__/FormField.test.tsx.snap
diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss
index b894cf73c1a..eaf64561ae8 100644
--- a/packages/grafana-ui/src/components/index.scss
+++ b/packages/grafana-ui/src/components/index.scss
@@ -6,3 +6,4 @@
 @import 'PanelOptionsGroup/PanelOptionsGroup';
 @import 'PanelOptionsGrid/PanelOptionsGrid';
 @import 'ColorPicker/ColorPicker';
+@import "FormField/FormField";
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 3a29623838a..ac06c07951b 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -11,7 +11,7 @@ export { default as resetSelectStyles } from './Select/resetSelectStyles';
 
 // Forms
 export { FormLabel } from './FormLabel/FormLabel';
-export { FormField } from './FormGroup/FormField';
+export { FormField } from './FormField/FormField';
 export { Label } from './Label/Label';
 
 export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder';