feat(alignment): update docs

[#81525282]

Signed-off-by: Geoff Pleiss <gpleiss@pivotal.io>

src/pivotal-ui/components/utils.scss

@@ -268,16 +268,45 @@ categories:
   - Utilities
 ---
 
-Alignment classes can be used to align text top, bottom, middle or left, right, center.
-
-Class                 | Description
---------------------- | -----------------
-`.txt-l`              | Aligns text to the left
-`.txt-r`              | Aligns text to the right
-`.txt-c`              | Centers text horizontally
-`.txt-t`              | Aligns text to the top
-`.txt-b`              | Aligns text to the bottom
-`.txt-m`              | Centers text vertically
+The following classes can be used to for horizontal alignment.
+
+```html_example_table
+<p class="txt-l">
+  <code>.txt-l</code>
+</p>
+
+<p class="txt-c">
+  <code>.txt-c</code>
+</p>
+
+<p class="txt-r">
+  <code>.txt-r</code>
+</p>
+```
+
+On `display: inline` and `display: table-cell` elements,
+the following classes can be used to for vertical alignment.
+
+```html_example
+<table class="table table-bordered">
+  <tr>
+    <td class="txt-t" width="20%">
+      <code>.txt-t</code>
+    </td>
+    <td class="txt-m" width="20%">
+      <code>.txt-m</code>
+    </td>
+    <td class="txt-b" width="20%">
+      <code>.txt-b</code>
+    </td>
+    <td width="40%">
+      Distillery trust fund Neutra fingerstache plaid messenger bag.
+      Try-hard health goth PBR Helvetica hashtag. Try-hard narwhal letterpress,
+      crucifix selfies trust fund swag mustache quinoa chambray iPhone.
+    </td>
+  </tr>
+</table>
+```
 
 */