diff --git a/src/components/codefield/CodeField.tsx b/src/components/codefield/CodeField.tsx
index d332360d..a253d22c 100644
--- a/src/components/codefield/CodeField.tsx
+++ b/src/components/codefield/CodeField.tsx
@@ -26,6 +26,7 @@ export type CodeFieldProps = {
   readOnly?: ReactCodeMirrorProps["readOnly"];
   onChange?: ReactCodeMirrorProps["onChange"];
   size?: CODE_FIELD_SIZE;
+  codeMirrorClassName?: number;
 } & HTMLAttributes<HTMLDivElement>;
 
 const CodeFieldRenderFunction: ForwardRefRenderFunction<HTMLDivElement, CodeFieldProps> = (
@@ -42,6 +43,7 @@ const CodeFieldRenderFunction: ForwardRefRenderFunction<HTMLDivElement, CodeFiel
     readOnly = true,
     onChange,
     size = CODE_FIELD_SIZE.medium,
+    codeMirrorClassName,
     ...rest
   },
   ref
@@ -68,7 +70,7 @@ const CodeFieldRenderFunction: ForwardRefRenderFunction<HTMLDivElement, CodeFiel
         onChange={onChange}
         theme={getCodeMirrorTheme(themeOverrides)}
         basicSetup={getCodeMirrorBasicSetup(showLineNumbers, editable)}
-        className={css(s.codemirrorStyles)}
+        className={`${css(s.codemirrorStyles)} ${codeMirrorClassName}`}
       />
       {displayCopy && (
         <MemoizedCopyButton
diff --git a/src/components/codefield/styles.ts b/src/components/codefield/styles.ts
index abfb5fcc..1756d450 100644
--- a/src/components/codefield/styles.ts
+++ b/src/components/codefield/styles.ts
@@ -11,7 +11,7 @@ const getContainerStyles = (size: CODE_FIELD_SIZE): StyleObject => ({
   ...expandProperty("padding", "24px"),
   display: "flex",
   justifyContent: "space-between",
-  alignItems: "center",
+  alignItems: "flex-start",
   flexWrap: "nowrap",
   gap: "16px",
   ...expandProperty("transition", "background 0.15s"),
@@ -23,6 +23,7 @@ const getContainerStyles = (size: CODE_FIELD_SIZE): StyleObject => ({
 
 const codemirrorStyles: StyleObject = {
   minWidth: 0,
+  flexGrow: 1,
   ":focus-within .cm-editor": {
     outline: "none",
   },