dl dt ddにグリッドレイアウトを使う

_includes/style.scss

@@ -40,9 +40,6 @@
   --article-padding: 0 1.25em 1em 1.25em;
   --article-padding-mobile: 0 1em 1em 1em;
 
-  --article-dd-bg: #fcfcfc;
-  --article-dd-border-radius: 10px;
-
   // 本文 - 見出し
   --article-h2-border-bottom: 1px solid #ddd;
   --article-h2-font-size: 1.5em;

_sass/_article.scss

@@ -29,19 +29,24 @@
   }
 
   > .body {
+    dl {
+      display: inline-grid;
+      grid-template-columns: auto 1fr;
+      display: -ms-inline-grid;
+      -ms-grid-columns: auto 1fr;
+    }
+
     dt {
+      grid-column: 1;
+      -ms-grid-column: 1;
       font-style: italic;
       font-weight: bold;
-      margin-bottom: 0.5em;
-      margin-top: 0.5em;
     }
 
     dd {
-      //background: var(--article-dd-bg);
-      //border: var(--border-common);
-      //border-radius: var(--article-dd-border-radius);
-      margin-left: 1.5em;
-      //padding: 1em;
+      grid-column: 2;
+      -ms-grid-column: 2;
+      margin-bottom: 0.5em;
     }
 
     h2,