diff --git a/frontend/src/metabase/components/List/List.module.css b/frontend/src/metabase/components/List/List.module.css
index 619482bd386dea6fa694cc2071660822f56ac3d6..b0b6f8c4881eecd400b4f2cbd9ebed791cff0116 100644
--- a/frontend/src/metabase/components/List/List.module.css
+++ b/frontend/src/metabase/components/List/List.module.css
@@ -53,7 +53,8 @@
 }
 
 .itemBody {
-  display: flex 1 1 auto;
+  display: flex;
+  flex: 1 1 auto;
   overflow: hidden;
 }
 
diff --git a/frontend/src/metabase/components/ListItem/ListItem.jsx b/frontend/src/metabase/components/ListItem/ListItem.jsx
index b9e7f11d8b0447025840989b73931c0e6bd5a632..cec998bddaddb5f95ee76dee6f3aac919fab7a1b 100644
--- a/frontend/src/metabase/components/ListItem/ListItem.jsx
+++ b/frontend/src/metabase/components/ListItem/ListItem.jsx
@@ -30,7 +30,7 @@ const ListItem = ({
         <div className={S.itemIcons}>
           {icon && <Icon className={S.chartIcon} name={icon} size={16} />}
         </div>
-        <div className={S.itemBody}>
+        <div className={cx(S.itemBody, CS.flexColumn)}>
           <div className={S.itemTitle}>
             <Ellipsified tooltip={name}>{name}</Ellipsified>
           </div>
diff --git a/frontend/src/metabase/reference/components/Field.jsx b/frontend/src/metabase/reference/components/Field.jsx
index 6cac63848d8054b45c7ab8f00a48d92878476a26..289a20a641022c918ce854cf55d97a21c02eaace 100644
--- a/frontend/src/metabase/reference/components/Field.jsx
+++ b/frontend/src/metabase/reference/components/Field.jsx
@@ -16,9 +16,12 @@ import { isTypeFK } from "metabase-lib/v1/types/utils/isa";
 import F from "./Field.module.css";
 
 const Field = ({ field, foreignKeys, url, icon, isEditing, formField }) => (
-  <div className={cx(S.item, CS.pt1, CS.borderTop)}>
-    <div className={S.itemBody} style={{ maxWidth: "100%", borderTop: "none" }}>
-      <div className={F.field}>
+  <div className={cx(S.item, CS.py1, CS.borderTop)}>
+    <div
+      className={cx(S.itemBody, CS.flexColumn)}
+      style={{ maxWidth: "100%", borderTop: "none" }}
+    >
+      <div className={F.field} style={{ flexGrow: "1" }}>
         <div className={cx(S.itemTitle, F.fieldName)}>
           {isEditing ? (
             <input
@@ -59,7 +62,7 @@ const Field = ({ field, foreignKeys, url, icon, isEditing, formField }) => (
               optionSectionFn={o => o.section}
             />
           ) : (
-            <div className={CS.flex}>
+            <div className={cx(CS.flex, CS.alignCenter)}>
               <div className={S.leftIcons}>
                 {icon && <Icon className={S.chartIcon} name={icon} size={20} />}
               </div>
@@ -83,7 +86,7 @@ const Field = ({ field, foreignKeys, url, icon, isEditing, formField }) => (
         </div>
         <div className={F.fieldDataType}>{field.base_type}</div>
       </div>
-      <div className={cx(S.itemSubtitle, F.fieldSecondary, { [CS.mt1]: true })}>
+      <div className={cx(S.itemSubtitle, { [CS.mt1]: true })}>
         <div className={F.fieldForeignKey}>
           {isEditing
             ? (isTypeFK(formField.semantic_type.value) ||
@@ -107,13 +110,12 @@ const Field = ({ field, foreignKeys, url, icon, isEditing, formField }) => (
                 </span>
               )}
         </div>
-        <div className={F.fieldOther} />
+        {field.description && (
+          <div className={cx(S.itemSubtitle, CS.mb2, { [CS.mt1]: isEditing })}>
+            {field.description}
+          </div>
+        )}
       </div>
-      {field.description && (
-        <div className={cx(S.itemSubtitle, CS.mb2, { [CS.mt1]: isEditing })}>
-          {field.description}
-        </div>
-      )}
     </div>
   </div>
 );