diff --git a/packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx
index a227f04ae24..e7459507628 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+
+import { InlineField } from '../..';
 import { HttpSettingsProps } from './types';
 import { FormField } from '../FormField/FormField';
 import { SecretFormField } from '../SecretFormField/SecretFormField';
@@ -33,7 +35,7 @@ export const BasicAuthSettings: React.FC<HttpSettingsProps> = ({ dataSourceConfi
 
   return (
     <>
-      <div className="gf-form">
+      <InlineField>
         <FormField
           label="User"
           labelWidth={10}
@@ -42,8 +44,8 @@ export const BasicAuthSettings: React.FC<HttpSettingsProps> = ({ dataSourceConfi
           value={dataSourceConfig.basicAuthUser}
           onChange={(event) => onChange({ ...dataSourceConfig, basicAuthUser: event.currentTarget.value })}
         />
-      </div>
-      <div className="gf-form">
+      </InlineField>
+      <InlineField>
         <SecretFormField
           isConfigured={
             !!dataSourceConfig.basicAuthPassword ||
@@ -55,7 +57,7 @@ export const BasicAuthSettings: React.FC<HttpSettingsProps> = ({ dataSourceConfi
           onReset={onPasswordReset}
           onChange={onPasswordChange}
         />
-      </div>
+      </InlineField>
     </>
   );
 };