Fixed explore query editor styling issues

public/app/plugins/datasource/prometheus/components/PromQueryField.tsx

@@ -257,18 +257,18 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
               syntaxLoaded={syntaxLoaded}
             />
           </div>
-          {error ? <div className="prom-query-field-info text-error">{error}</div> : null}
-          {hint ? (
-            <div className="prom-query-field-info text-warning">
-              {hint.label}{' '}
-              {hint.fix ? (
-                <a className="text-link muted" onClick={this.onClickHintFix}>
-                  {hint.fix.label}
-                </a>
-              ) : null}
-            </div>
-          ) : null}
         </div>
+        {error ? <div className="prom-query-field-info text-error">{error}</div> : null}
+        {hint ? (
+          <div className="prom-query-field-info text-warning">
+            {hint.label}{' '}
+            {hint.fix ? (
+              <a className="text-link muted" onClick={this.onClickHintFix}>
+                {hint.fix.label}
+              </a>
+            ) : null}
+          </div>
+        ) : null}
       </>
     );
   }

public/sass/components/_gf-form.scss

@@ -5,7 +5,7 @@ $input-border: 1px solid $input-border-color;
   margin-bottom: $gf-form-margin;
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
   text-align: left;
   position: relative;
 

public/sass/components/_slate_editor.scss

@@ -9,7 +9,7 @@
   position: relative;
   display: inline-block;
   padding: $input-padding-y $input-padding-x;
-  height: $gf-form-input-height;
+  min-height: $gf-form-input-height;
   width: 100%;
   cursor: text;
   line-height: $line-height-base;