diff --git a/ui/packages/consul-ui/app/components/definition-table/README.mdx b/ui/packages/consul-ui/app/components/definition-table/README.mdx
new file mode 100644
index 0000000000..971b59ee7b
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/definition-table/README.mdx
@@ -0,0 +1,25 @@
+---
+class: css
+---
+# definition-table
+
+Simple CSS component to render a `dl` similar to a table with column headers.
+Contents of the `dd` are currently inline-block'ed for CopyButton reasons.
+
+```hbs preview-template
+<div class="definition-table">
+  <dl>
+    <dt>Title 1</dt>
+    <dd>Value</dd>
+    <dt>Title 2</dt>
+    <dd><CopyButton @name="Title 2" @value="Value"/>Value</dd>
+  </dl>
+</div>
+```
+
+
+```css
+.definition-table {
+  @extend %definition-table;
+}
+```
diff --git a/ui/packages/consul-ui/app/components/definition-table/debug.scss b/ui/packages/consul-ui/app/components/definition-table/debug.scss
new file mode 100644
index 0000000000..b5b9b8a46c
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/definition-table/debug.scss
@@ -0,0 +1,5 @@
+[id^='docfy-demo-preview-definition-table'] {
+  .definition-table {
+    @extend %definition-table;
+  }
+}
diff --git a/ui/packages/consul-ui/app/components/definition-table/layout.scss b/ui/packages/consul-ui/app/components/definition-table/layout.scss
index b14ee03cb3..feb5e1b27a 100644
--- a/ui/packages/consul-ui/app/components/definition-table/layout.scss
+++ b/ui/packages/consul-ui/app/components/definition-table/layout.scss
@@ -3,6 +3,6 @@
   grid-template-columns: 140px auto;
   grid-gap: 0.4em 20px;
 }
-%definition-table .copy-button {
-  float: left;
+%definition-table dd > * {
+  display: inline-block;
 }
diff --git a/ui/packages/consul-ui/app/styles/debug.scss b/ui/packages/consul-ui/app/styles/debug.scss
index d8df83ca95..aed6b90de3 100644
--- a/ui/packages/consul-ui/app/styles/debug.scss
+++ b/ui/packages/consul-ui/app/styles/debug.scss
@@ -8,6 +8,7 @@
 @import 'consul-ui/components/horizontal-kv-list/debug';
 @import 'consul-ui/components/icon-definition/debug';
 @import 'consul-ui/components/inline-alert/debug';
+@import 'consul-ui/components/definition-table/debug';
 
 html.is-debug body > .brand-loader {
   display: none !important;