Style definition list inline

www/_sass/_base.scss

@@ -91,8 +91,25 @@ ol, ul {
   list-style: none;
 }
 
+dl {
+  // @include display(flex);
+  // @include flex-wrap(wrap);
+}
+
+dt {
+  @extend .cf;
+  float: left;
+  margin-right: 0.25em;
+  // width: 240px;
+}
+
 dd {
-  margin-bottom: 1em;
+  // width: calc(100vh - 200px);
+  margin-bottom: 0.5em;
+
+  div {
+    // max-width: 400px;
+  }
 }
 
 img, svg, iframe {

www/_sass/_utilities.scss

@@ -12,3 +12,30 @@
   clip: rect(0,0,0,0);
   border: 0;
 }
+
+/**
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    contenteditable attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that are clearfixed.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+.cf:before,
+.cf:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+
+.cf:after {
+    clear: both;
+}
+
+/**
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */
+.cf {
+    *zoom: 1;
+}

www/index.html

@@ -57,12 +57,10 @@ <h2 id="plugins">Plugins</h2>
       <dl>
         {% for item in site.data.plugins %}
         <dt>
-          <a href="http://{{ site.url }}/rdoc/classes/Shrine/Plugins/{{ item.path }}">
-            {{ item.name }}
-          </a>
+          <a href="http://{{ site.url }}/rdoc/classes/Shrine/Plugins/{{ item.path }}">{{ item.name }}</a>:
         </dt>
         <dd>
-          {{ item.description }}
+          <div>{{ item.description }}</div>
         </dd>
         {% endfor %}
       </dl>