Switch to using tables for properties.

src/OrgAst.module.css

@@ -46,3 +46,34 @@
   padding: 5px 5px 5px 20px;
   background: #eeeeee;
 }
+
+.OrgAstProperties {
+  width: 100%;
+
+  > tbody {
+    > tr {
+      border-width: 1px 0;
+      border-style: solid;
+      border-color: #000000;
+
+      > th,
+      > td {
+        padding: 5px;
+      }
+
+      > th {
+        font-weight: 700;
+        text-align: right;
+        padding-right: 5px;
+        width: 0;
+      }
+    }
+
+    > tr:nth-child(odd) {
+      background-color: #eeeeee;
+    }
+    > tr:nth-child(even) {
+      background-color: #ffffff;
+    }
+  }
+}

src/OrgAst.module.css.d.ts

@@ -3,3 +3,4 @@ export const OrgAstNode: string;
 export const OrgAstNodeType: string;
 export const OrgAstChildren: string;
 export const selected: string;
+export const OrgAstProperties: string;

src/OrgAst.tsx

@@ -137,15 +137,19 @@ const OrgPropertiesList = (props: {
   const entries = Object.entries(props.properties).map(([key, value]) => {
     return (
       <Fragment key={key}>
-        <dt>{key}</dt>
-        <dd>{JSON.stringify(value)}</dd>
+        <tr>
+          <th scope="row">{key}:</th>
+          <td>{JSON.stringify(value)}</td>
+        </tr>
       </Fragment>
     );
   });
   return (
-    <dl>
+    <table className={styles.OrgAstProperties}>
+      <tbody>
         {entries}
-    </dl>
+      </tbody>
+    </table>
   );
 };