diff --git a/src/components/PropList.js b/src/components/PropList.js
index a7b97de74..1d2f5a292 100644
--- a/src/components/PropList.js
+++ b/src/components/PropList.js
@@ -20,20 +20,20 @@ const PropTypeInfo = ({ type }) => {
       const { itemTypes } = type.meta;
 
       return itemTypes.raw === 'oneOf' ? (
-        <div className={styles.listLike}>
+        <code className={styles.listLike}>
           <div>{'<Array of'}</div>
           <div className={styles.arg}>
             <PropTypeInfo type={itemTypes} />
           </div>
           <div>{'>'}</div>
-        </div>
+        </code>
       ) : (
         <PropTypeInfo type={itemTypes} />
       );
     }
     case 'oneOf':
       return (
-        <div className={styles.listLike}>
+        <code className={styles.listLike}>
           <div>{'<One of'}</div>
           <div className={styles.arg}>
             {type.meta.constants.map((constant) => (
@@ -41,7 +41,7 @@ const PropTypeInfo = ({ type }) => {
             ))}
           </div>
           <div>{'>'}</div>
-        </div>
+        </code>
       );
     case 'oneOfType':
       return type.meta.types.map((type, idx) => (
@@ -86,20 +86,24 @@ const PropList = ({ propTypes }) => {
           return (
             <div key={name} className={styles.container}>
               <div className={styles.info}>
-                <code>{name}</code>
-                {isRequired && <span className={styles.flagged}>required</span>}
-                {deprecation && (
-                  <span className={styles.flagged}>deprecated</span>
-                )}
-                <div className={styles.type}>{type.name}</div>
+                <div>
+                  <code className={styles.propName}>{name}</code>
+                  {isRequired && (
+                    <span className={styles.flagged}>required</span>
+                  )}
+                  {deprecation && (
+                    <span className={styles.flagged}>deprecated</span>
+                  )}
+                </div>
+                <code className={styles.type}>{type.name}</code>
                 {defaultValue !== undefined && (
                   <div className={styles.default}>
-                    <p>DEFAULT</p>
-                    <p>{String(defaultValue)}</p>
+                    <div className={styles.label}>DEFAULT</div>
+                    <code>{String(defaultValue)}</code>
                   </div>
                 )}
               </div>
-              <div className={styles.propInfo}>
+              <div>
                 {deprecation && (
                   <div className={styles.deprecation}>
                     <div className={styles.deprecationDate}>
diff --git a/src/components/PropList.module.scss b/src/components/PropList.module.scss
index c6302b766..2aaba2056 100644
--- a/src/components/PropList.module.scss
+++ b/src/components/PropList.module.scss
@@ -1,5 +1,7 @@
 .container {
-  display: flex;
+  display: grid;
+  grid-template-columns: 30% 1fr;
+  grid-gap: 1rem;
 
   &:not(:last-child) {
     margin-bottom: 2rem;
@@ -8,14 +10,13 @@
   }
 }
 
+.propName {
+  font-weight: bold;
+}
+
 .info {
-  width: 30%;
   word-break: break-all;
 
-  code {
-    font-weight: bold;
-  }
-
   h3 {
     margin-top: 0;
   }
@@ -25,8 +26,9 @@
   margin-top: 2rem;
   color: var(--color-neutrals-700);
 
-  p:first-of-type {
+  .label {
     font-size: 0.75rem;
+    font-weight: bold;
   }
 }
 
@@ -46,10 +48,6 @@
   margin-bottom: 1rem;
 }
 
-.propInfo {
-  width: 70%;
-}
-
 .markdownContainer > *:first-child {
   margin-top: 0;
 }
@@ -73,7 +71,6 @@
 }
 
 .listLike {
-  font-family: var(--code-font);
   font-size: 0.875rem;
   color: var(--color-neutrals-600);
   max-height: 320px;