diff --git a/packages/terra-clinical-item-view/CHANGELOG.md b/packages/terra-clinical-item-view/CHANGELOG.md
index a68ca95bc..c35b2b20c 100644
--- a/packages/terra-clinical-item-view/CHANGELOG.md
+++ b/packages/terra-clinical-item-view/CHANGELOG.md
@@ -8,6 +8,9 @@
   * Added `trueColumn` prop to toggle between displaying in a two column layout by row or by column.
   * Added accessibility guide.
 
+* Changed
+  * Changed the structure of how displays in an item view are returned, now they exist in an unordered list as list items.
+
 ## 4.11.0 - (September 21, 2023)
 
 * Changed
diff --git a/packages/terra-clinical-item-view/src/ItemView.jsx b/packages/terra-clinical-item-view/src/ItemView.jsx
index 8a3cff442..42a1c6b7b 100644
--- a/packages/terra-clinical-item-view/src/ItemView.jsx
+++ b/packages/terra-clinical-item-view/src/ItemView.jsx
@@ -150,6 +150,110 @@ const classesForContent = (rowIndex, rowCount, contentIndex, emphasis) => {
   return ['content'].concat(classes);
 };
 
+const renderRow = (row, rowIndex, rowCount, emphasis, overrideDefaultStyling) => {
+  const rowKey = rowIndex;
+
+  return (
+    <li className={cx('row')} key={rowKey}>
+      <ul className={cx('row-list')} key={rowKey}>
+        {row.map((display, displayIndex) => {
+          const displayKey = displayIndex;
+          const contentClasses = overrideDefaultStyling ? 'content' : classesForContent(rowIndex, rowCount, displayIndex, emphasis);
+
+          return (
+            <li className={cx(contentClasses)} key={displayKey}>
+              {display}
+            </li>
+          );
+        })}
+      </ul>
+    </li>
+  );
+};
+
+const renderTwoColumns = (displayGroup, displayGroupIndex, emphasis, overrideDefaultStyling) => {
+  const columnKey = displayGroupIndex;
+  const displayCount = displayGroup.length;
+  const containerStyling = displayGroupIndex === 0 ? 'primary-column' : 'secondary-column';
+
+  return (
+    <li className={cx(containerStyling)} key={columnKey}>
+      <ul className={cx('column-list')} key={columnKey}>
+        {displayGroup.map((display, contentIndex) => {
+          const contentKey = contentIndex;
+          const contentClasses = overrideDefaultStyling ? 'content' : classesForContent(contentIndex, displayCount, displayGroupIndex, emphasis);
+
+          return (
+            <li className={cx(contentClasses)} key={contentKey}>
+              {display}
+            </li>
+          );
+        })}
+      </ul>
+    </li>
+  );
+};
+
+const renderColumn = (displays, emphasis, overrideDefaultStyling) => {
+  const displayCount = displays.length;
+
+  return (
+    <div>
+      <ul className={cx('column-list-container')}>
+        {displays.map((display, displayIndex) => {
+          const contentKey = displayIndex;
+          /**
+           * We are only ever rendering one column so zero is being passed into classesForContent for the contentIndex variable.
+           * classesForContent would usually take in an index for that but in this case we don't have one explicitly.
+           */
+          const contentClasses = overrideDefaultStyling ? 'content' : classesForContent(displayIndex, displayCount, 0, emphasis);
+
+          return (
+            <li className={cx(contentClasses)} key={contentKey}>
+              {display}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+const renderByRowView = (displays, emphasis, overrideDefaultStyling) => {
+  const displayGroups = [];
+
+  while (displays.length) {
+    displayGroups.push(displays.splice(0, 2));
+  }
+
+  return (
+    <div>
+      <ul className={cx('row-list-container')}>
+        {displayGroups.map((displayRow, rowIndex) => {
+          const row = renderRow(displayRow, rowIndex, displayGroups.length, emphasis, overrideDefaultStyling);
+          return row;
+        })}
+      </ul>
+    </div>
+  );
+};
+
+const renderSingleDisplayView = (singleDisplay, overrideDefaultStyling) => {
+  /**
+   * Since this is always a singular display, the content styling will be the primary defaults if they are not overridden.
+   * We don't have to call into the classesForContent method and instead can just set the primary size and color here.
+   */
+  const contentClass = overrideDefaultStyling ? 'content' : ['content', 'content-primary-size', 'content-primary-color'];
+
+  return (
+    <div className={cx('single-result-column-container')}>
+      <div className={cx(contentClass)}>
+        {singleDisplay}
+      </div>
+    </div>
+  );
+};
+
 const twoColumnGrouping = (displays) => {
   let count = 0;
   const displayGroups = [];
@@ -172,97 +276,39 @@ const twoColumnGrouping = (displays) => {
   return displayGroups;
 };
 
-const renderRow = (row, rowIndex, rowCount, emphasis) => {
-  const rowKey = rowIndex;
-  return (
-    <div className={cx('row')} key={rowKey}>
-      {row.map((display, displayIndex) => {
-        const displayKey = displayIndex;
-        const contentClasses = classesForContent(rowIndex, rowCount, displayIndex, emphasis);
-
-        return (
-          <div className={cx(contentClasses)} key={displayKey}>
-            {display}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-const renderColumn = (displayGroup, displayGroupIndex, emphasis, overrideDefaultStyling) => {
-  const columnKey = displayGroupIndex;
-  const displayCount = displayGroup.length;
-  let containerStyling;
-
-  if (displayGroupIndex === 0) {
-    containerStyling = 'primary-column';
-  } else {
-    containerStyling = 'secondary-column';
-  }
-
-  return (
-    <div className={cx(containerStyling)} key={columnKey}>
-      {displayGroup.map((display, contentIndex) => {
-        const contentKey = contentIndex;
-        let contentClasses;
-
-        if (overrideDefaultStyling) {
-          contentClasses = 'content';
-        } else {
-          contentClasses = classesForContent(contentIndex, displayCount, displayGroupIndex, emphasis);
-        }
-
-        return (
-          <div className={cx(contentClasses)} key={contentKey}>
-            {display}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
 const renderView = (displays, layout, emphasis, overrideDefaultStyling, trueColumn) => {
   if (displays === null || displays === undefined || !displays.length) {
     return undefined;
   }
 
-  let displayGroups = [];
   const displaysSlice = displays.slice(0, 8);
-  const primaryColumn = [];
+
+  /**
+   * If there is only one display we don't want to return it as an item in a list.
+   * The method renderSingleDisplayView here takes in the single display and returns it within simple divs instead.
+   */
+  if (displaysSlice.length === 1) { return renderSingleDisplayView(displaysSlice, overrideDefaultStyling); }
 
   if (layout === Layouts.TWO_COLUMNS) {
-    if (trueColumn) {
-      displayGroups = twoColumnGrouping(displaysSlice);
-    } else {
-      while (displaysSlice.length) {
-        displayGroups.push(displaysSlice.splice(0, 2));
-      }
-
-      return (
-        <div className={cx('row-container')}>
-          {displayGroups.map((displayRow, rowIndex) => {
-            const row = renderRow(displayRow, rowIndex, displayGroups.length, emphasis);
-            return row;
-          })}
-        </div>
-      );
-    }
-  } else {
-    while (displaysSlice.length) {
-      primaryColumn.push(displaysSlice.splice(0, 1));
-    }
+    if (!trueColumn) { return renderByRowView(displaysSlice, emphasis, overrideDefaultStyling); }
 
-    displayGroups.push(primaryColumn);
+    const displayGroups = twoColumnGrouping(displaysSlice);
+
+    return (
+      <div>
+        <ul className={cx('column-list-container')}>
+          {displayGroups.map((group, index) => {
+            const column = renderTwoColumns(group, index, emphasis, overrideDefaultStyling);
+            return column;
+          })}
+        </ul>
+      </div>
+    );
   }
 
   return (
-    <div className={cx('column-container')}>
-      {displayGroups.map((group, index) => {
-        const column = renderColumn(group, index, emphasis, overrideDefaultStyling);
-        return column;
-      })}
+    <div>
+      {renderColumn(displaysSlice, emphasis, overrideDefaultStyling)}
     </div>
   );
 };
diff --git a/packages/terra-clinical-item-view/src/ItemView.module.scss b/packages/terra-clinical-item-view/src/ItemView.module.scss
index 53ce8065a..cb2536f0e 100644
--- a/packages/terra-clinical-item-view/src/ItemView.module.scss
+++ b/packages/terra-clinical-item-view/src/ItemView.module.scss
@@ -55,15 +55,55 @@
     overflow: hidden; // VERY IMPORTANT FOR IE10
   }
 
-  .column-container {
+  .content {
+    align-items: flex-start;
+    display: flex;
+    overflow: hidden; // VERY IMPORTANT FOR IE10
+  }
+
+  .single-result-column-container {
     display: flex;
     flex-flow: row nowrap;
   }
 
-  .content {
-    align-items: flex-start;
+  .column-list-container {
     display: flex;
-    overflow: hidden; // VERY IMPORTANT FOR IE10
+    list-style-type: none;
+    margin-bottom: 0;
+    margin-top: 0;
+    padding-left: 0;
+  }
+
+  .column-list {
+    display: flex;
+    flex-flow: column nowrap;
+    list-style-type: none;
+    margin-bottom: 0;
+    margin-top: 0;
+    padding-left: 0;
+  }
+
+  .row-list-container {
+    display: flex;
+    flex-flow: row wrap;
+    list-style-type: none;
+    margin-bottom: 0;
+    margin-top: 0;
+    padding-left: 0;
+  }
+
+  .row {
+    display: flex;
+    width: 100%;
+  }
+
+  .row-list {
+    display: flex;
+    list-style-type: none;
+    margin-bottom: 0;
+    margin-top: 0;
+    padding-left: 0;
+    width: 100%;
   }
 
   .secondary-column {
@@ -78,31 +118,30 @@
     }
   }
 
-  .row {
-    display: flex;
-    width: 100%;
-  }
-
   .is-truncated,
   .is-truncated [data-terra-clinical-item-display-text] {
     @include terra-clinical-text-truncate;
   }
 
   // Layouts
-  /* stylelint-disable selector-max-compound-selectors */
   .one-column {
-    .primary-column {
-      width: 100%;
+    .column-list-container {
+      flex-flow: column nowrap;
     }
   }
-  /* stylelint-enable selector-max-compound-selectors */
 
+  /* stylelint-disable selector-max-compound-selectors */
   .two-columns {
-    .primary-column {
-      flex: 1 1 auto;
-      float: left;
+    .column-list-container {
+      flex-flow: row nowrap;
+
+      .primary-column {
+        flex: 1 1 auto;
+        float: left;
+      }
     }
   }
+  /* stylelint-enable selector-max-compound-selectors */
 
   .two-columns-by-row {
     .content:nth-child(odd) {
diff --git a/packages/terra-clinical-item-view/src/terra-dev-site/doc/clinical-item-view/clinicalItemView.1.doc.mdx b/packages/terra-clinical-item-view/src/terra-dev-site/doc/clinical-item-view/clinicalItemView.1.doc.mdx
index bc5df38d3..58c5c010c 100644
--- a/packages/terra-clinical-item-view/src/terra-dev-site/doc/clinical-item-view/clinicalItemView.1.doc.mdx
+++ b/packages/terra-clinical-item-view/src/terra-dev-site/doc/clinical-item-view/clinicalItemView.1.doc.mdx
@@ -1,4 +1,5 @@
 import { Badge } from 'terra-clinical-item-view/package.json?dev-site-package';
+import { Notice } from "@cerner/terra-docs";
 
 import ItemViewStandard from '../example/ItemViewStandard?dev-site-example';
 import ItemViewTwoColumn from '../example/ItemViewTwoColumn?dev-site-example';
@@ -8,6 +9,8 @@ import ItemViewComment from '../example/ItemViewComment?dev-site-example';
 import ItemViewAll from '../example/ItemViewAll?dev-site-example';
 import ItemViewAllTopAligned from '../example/ItemViewAllTopAligned?dev-site-example';
 import ItemViewOverrideDefaultStyling from '../example/ItemViewOverrideDefaultStyling?dev-site-example';
+import ItemViewWithHeader from '../example/ItemViewWithHeader?dev-site-example';
+import ItemViewTwoColumnWithHeader from '../example/ItemViewTwoColumnWithHeader?dev-site-example';
 
 import ItemViewProps from 'terra-clinical-item-view/src/ItemView.jsx?dev-site-props-table';
 
@@ -32,6 +35,57 @@ import ItemView from 'terra-clinical-item-view';
 * [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
 * [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)
 
+## Accessibility
+
+<Notice variant="important" ariaLevel="3">
+
+#### Accessibility Guidance: Headers
+
+For the purposes of accessibility compliance, it is **strongly** suggested to include a header element directly above
+the Clinical Item View during implementation. This ensures that the list of displays in the view have proper context.
+**The header not only acts as the main label for what the view contains, but also helps with page navigation.**
+
+Consumers can use the Terra Core Heading component found [here](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/heading/about)
+or the Clincial Header component found [here](https://engineering.cerner.com/terra-clinical/components/terra-clinical-header/clinical-header/clinical-header).
+Refer to A11y standards for how to properly implement headings in the context of your webpage. Further information can be found on the Clinical Item View accessibility guide.
+
+The following are two examples of how to implement a header for the one column and two column layouts. 
+
+</Notice>
+
+<ItemViewWithHeader
+    title="ItemView - With Header"
+/>
+<ItemViewTwoColumnWithHeader
+    title="ItemView - Two Column Layout With Header"
+/>
+
+<Notice variant="important" ariaLevel="3">
+
+#### Accessibility Guidance: Truncated Text
+
+Truncation of text can pose an accessibility concern if no method of disclosing the full text is available
+to the user. When using `isTruncated`, consumers are responsible for providing a progressive disclosure pattern
+ to disclose the full Item Display text in order to ensure that it is accessible for keyboard navigation users.
+
+**There should always be a method of accessing the truncated information. If there is no way to progressively
+disclose the full content of the truncated information, then truncation should not be used.**
+
+Some examples of progressive disclosure patterns that may be used to disclose truncated information include:
+- Accordions
+- Dialogs
+- Popovers
+- Show/Hide
+- Split Views
+- Toasts
+
+The method of disclosure **must** be accessible via keyboard interactions.
+
+Truncation should be avoided where it is not necessary. Certain content should **never** be truncated (i.e. 
+medication names and dosages in menus where the user is selecting from a list of choices).
+
+</Notice>
+
 ## Examples
 <ItemViewStandard title="ItemView - Default" />
 <ItemViewTwoColumn
diff --git a/packages/terra-clinical-item-view/src/terra-dev-site/test/clinical-item-view/SingleDisplayItemView.test.jsx b/packages/terra-clinical-item-view/src/terra-dev-site/test/clinical-item-view/SingleDisplayItemView.test.jsx
new file mode 100644
index 000000000..bc5b960a3
--- /dev/null
+++ b/packages/terra-clinical-item-view/src/terra-dev-site/test/clinical-item-view/SingleDisplayItemView.test.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import IconAlert from 'terra-icon/lib/icon/IconAlert';
+import ItemView from '../../../ItemView';
+
+const display1 = <ItemView.Display icon={<IconAlert />} iconAlignment="inline" text="display1 Text display1 Text display1 Text display1 Text display1 Text display1 Text display1 Text display1 Text" key="123" />;
+
+const views = () => (
+  <div>
+    <h2>One Column - Single Display</h2>
+    <p>When there is only one display we return it without putting it into an unordered list and returning it as a list item.</p>
+    <ItemView displays={[display1]} id="test-single-display" />
+  </div>
+);
+
+export default views;
diff --git a/packages/terra-clinical-item-view/tests/jest/ItemView.test.jsx b/packages/terra-clinical-item-view/tests/jest/ItemView.test.jsx
index fdbdfe21d..ad09b80b9 100644
--- a/packages/terra-clinical-item-view/tests/jest/ItemView.test.jsx
+++ b/packages/terra-clinical-item-view/tests/jest/ItemView.test.jsx
@@ -246,6 +246,39 @@ it('should render two columns with 8 displays when trueColumn is false', () => {
   expect(itemView).toMatchSnapshot();
 });
 
+it('should render a singular display not in an unordered list', () => {
+  const display1 = shallowWithIntl(<ItemView.Display text="display 1" />);
+  const displays = [display1];
+  const itemView = shallow(<ItemView displays={displays} />);
+  expect(itemView.find('ItemDisplay')).toHaveLength(1);
+  expect(itemView.find('div.single-result-column-container')).toHaveLength(1);
+  expect(itemView.find('ul.column-list-container')).toHaveLength(0);
+  expect(itemView).toMatchSnapshot();
+});
+
+it('should render several displays in an unordered list for one column layout', () => {
+  const display1 = shallowWithIntl(<ItemView.Display text="display 1" />);
+  const display2 = shallowWithIntl(<ItemView.Display text="display 2" />);
+  const display3 = shallowWithIntl(<ItemView.Display text="display 3" />);
+  const displays = [display1, display2, display3];
+  const itemView = shallow(<ItemView displays={displays} />);
+  expect(itemView.find('ItemDisplay')).toHaveLength(3);
+  expect(itemView.find('ul.column-list-container')).toHaveLength(1);
+  expect(itemView).toMatchSnapshot();
+});
+
+it('should render each column as an unordered list within a primary unordered list for two column layout', () => {
+  const display1 = shallowWithIntl(<ItemView.Display text="display 1" />);
+  const display2 = shallowWithIntl(<ItemView.Display text="display 2" />);
+  const display3 = shallowWithIntl(<ItemView.Display text="display 3" />);
+  const displays = [display1, display2, display3];
+  const itemView = shallow(<ItemView displays={displays} layout="twoColumns" trueColumn />);
+  expect(itemView.find('ItemDisplay')).toHaveLength(3);
+  expect(itemView.find('ul.column-list-container')).toHaveLength(1);
+  expect(itemView.find('ul.column-list')).toHaveLength(2);
+  expect(itemView).toMatchSnapshot();
+});
+
 it('correctly applies the theme context className', () => {
   jest.spyOn(React, 'useContext')
     .mockReturnValue({
diff --git a/packages/terra-clinical-item-view/tests/jest/__snapshots__/ItemView.test.jsx.snap b/packages/terra-clinical-item-view/tests/jest/__snapshots__/ItemView.test.jsx.snap
index f4c158e89..a7a6727fc 100644
--- a/packages/terra-clinical-item-view/tests/jest/__snapshots__/ItemView.test.jsx.snap
+++ b/packages/terra-clinical-item-view/tests/jest/__snapshots__/ItemView.test.jsx.snap
@@ -18,51 +18,45 @@ exports[`should render 1 start theme display 1`] = `
     className="body"
   >
     <div
-      className="column-container"
+      className="single-result-column-container"
     >
       <div
-        className="primary-column"
-        key="0"
+        className="content content-primary-size content-primary-color"
       >
-        <div
-          className="content content-primary-size content-primary-color"
-          key="0"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
+        <ItemDisplay
+          iconAlignment="center"
+          intl={
+            Object {
+              "defaultFormats": Object {},
+              "defaultLocale": "en",
+              "formatDate": [Function],
+              "formatHTMLMessage": [Function],
+              "formatMessage": [Function],
+              "formatNumber": [Function],
+              "formatPlural": [Function],
+              "formatRelative": [Function],
+              "formatTime": [Function],
+              "formats": Object {},
+              "formatters": Object {
+                "getDateTimeFormat": [Function],
+                "getMessageFormat": [Function],
+                "getNumberFormat": [Function],
+                "getPluralFormat": [Function],
+                "getRelativeFormat": [Function],
+              },
+              "locale": "en",
+              "messages": null,
+              "now": [Function],
+              "onError": [Function],
+              "textComponent": "span",
+              "timeZone": null,
             }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 1"
-            textStyle="primary"
-          />
-        </div>
+          }
+          isDisabled={false}
+          isTruncated={false}
+          text="display 1"
+          textStyle="primary"
+        />
       </div>
     </div>
   </div>
@@ -76,91 +70,90 @@ exports[`should render 2 start theme displays 1`] = `
   <div
     className="body"
   >
-    <div
-      className="column-container"
-    >
-      <div
-        className="primary-column"
-        key="0"
-      >
-        <div
-          className="content content-primary-size content-primary-color"
-          key="0"
+    <div>
+      <div>
+        <ul
+          className="column-list-container"
         >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
+          <li
+            className="content content-primary-size content-primary-color"
+            key="0"
+          >
+            <ItemDisplay
+              iconAlignment="center"
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": null,
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": "span",
+                  "timeZone": null,
+                }
               }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 1"
-            textStyle="primary"
-          />
-        </div>
-        <div
-          className="content content-secondary-size content-secondary-color"
-          key="1"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
+              isDisabled={false}
+              isTruncated={false}
+              text="display 1"
+              textStyle="primary"
+            />
+          </li>
+          <li
+            className="content content-secondary-size content-secondary-color"
+            key="1"
+          >
+            <ItemDisplay
+              iconAlignment="center"
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": null,
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": "span",
+                  "timeZone": null,
+                }
               }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 2"
-            textStyle="primary"
-          />
-        </div>
+              isDisabled={false}
+              isTruncated={false}
+              text="display 2"
+              textStyle="primary"
+            />
+          </li>
+        </ul>
       </div>
     </div>
   </div>
@@ -174,130 +167,129 @@ exports[`should render 3 start theme displays 1`] = `
   <div
     className="body"
   >
-    <div
-      className="column-container"
-    >
-      <div
-        className="primary-column"
-        key="0"
-      >
-        <div
-          className="content content-primary-size content-primary-color"
-          key="0"
+    <div>
+      <div>
+        <ul
+          className="column-list-container"
         >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
+          <li
+            className="content content-primary-size content-primary-color"
+            key="0"
+          >
+            <ItemDisplay
+              iconAlignment="center"
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": null,
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": "span",
+                  "timeZone": null,
+                }
               }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 1"
-            textStyle="primary"
-          />
-        </div>
-        <div
-          className="content content-secondary-size content-primary-color"
-          key="1"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
+              isDisabled={false}
+              isTruncated={false}
+              text="display 1"
+              textStyle="primary"
+            />
+          </li>
+          <li
+            className="content content-secondary-size content-primary-color"
+            key="1"
+          >
+            <ItemDisplay
+              iconAlignment="center"
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": null,
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": "span",
+                  "timeZone": null,
+                }
               }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 2"
-            textStyle="primary"
-          />
-        </div>
-        <div
-          className="content content-secondary-size content-secondary-color"
-          key="2"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
+              isDisabled={false}
+              isTruncated={false}
+              text="display 2"
+              textStyle="primary"
+            />
+          </li>
+          <li
+            className="content content-secondary-size content-secondary-color"
+            key="2"
+          >
+            <ItemDisplay
+              iconAlignment="center"
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": null,
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": "span",
+                  "timeZone": null,
+                }
               }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 3"
-            textStyle="primary"
-          />
-        </div>
+              isDisabled={false}
+              isTruncated={false}
+              text="display 3"
+              textStyle="primary"
+            />
+          </li>
+        </ul>
       </div>
     </div>
   </div>
@@ -357,6 +349,59 @@ exports[`should render a default component 1`] = `
 </div>
 `;
 
+exports[`should render a singular display not in an unordered list 1`] = `
+<div
+  className="item-view one-column"
+>
+  <div
+    className="body"
+  >
+    <div
+      className="single-result-column-container"
+    >
+      <div
+        className="content content-primary-size content-primary-color"
+      >
+        <ItemDisplay
+          iconAlignment="center"
+          intl={
+            Object {
+              "defaultFormats": Object {},
+              "defaultLocale": "en",
+              "formatDate": [Function],
+              "formatHTMLMessage": [Function],
+              "formatMessage": [Function],
+              "formatNumber": [Function],
+              "formatPlural": [Function],
+              "formatRelative": [Function],
+              "formatTime": [Function],
+              "formats": Object {},
+              "formatters": Object {
+                "getDateTimeFormat": [Function],
+                "getMessageFormat": [Function],
+                "getNumberFormat": [Function],
+                "getPluralFormat": [Function],
+                "getRelativeFormat": [Function],
+              },
+              "locale": "en",
+              "messages": null,
+              "now": [Function],
+              "onError": [Function],
+              "textComponent": "span",
+              "timeZone": null,
+            }
+          }
+          isDisabled={false}
+          isTruncated={false}
+          text="display 1"
+          textStyle="primary"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`should render a start accessory 1`] = `
 <div
   className="item-view one-column"
@@ -432,267 +477,555 @@ exports[`should render displays with original styling when overrideDefaultStylin
   <div
     className="body"
   >
-    <div
-      className="column-container"
-    >
-      <div
-        className="primary-column"
-        key="0"
+    <div>
+      <div>
+        <ul
+          className="column-list-container"
+        >
+          <li
+            className="content"
+            key="0"
+          >
+            <ItemDisplay
+              iconAlignment="center"
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": null,
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": "span",
+                  "timeZone": null,
+                }
+              }
+              isDisabled={false}
+              isTruncated={false}
+              text="display 1"
+              textStyle="strong"
+            />
+          </li>
+          <li
+            className="content"
+            key="1"
+          >
+            <ItemDisplay
+              iconAlignment="center"
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": null,
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": "span",
+                  "timeZone": null,
+                }
+              }
+              isDisabled={false}
+              isTruncated={false}
+              text="display 2"
+              textStyle="attention"
+            />
+          </li>
+          <li
+            className="content"
+            key="2"
+          >
+            <ItemDisplay
+              iconAlignment="center"
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": null,
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": "span",
+                  "timeZone": null,
+                }
+              }
+              isDisabled={false}
+              isTruncated={false}
+              text="display 3"
+              textStyle="secondary"
+            />
+          </li>
+          <li
+            className="content"
+            key="3"
+          >
+            <ItemDisplay
+              iconAlignment="center"
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": null,
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": "span",
+                  "timeZone": null,
+                }
+              }
+              isDisabled={false}
+              isTruncated={false}
+              text="display 4"
+              textStyle="strikeThrough"
+            />
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should render each column as an unordered list within a primary unordered list for two column layout 1`] = `
+<div
+  className="item-view two-columns"
+>
+  <div
+    className="body"
+  >
+    <div>
+      <ul
+        className="column-list-container"
       >
-        <div
-          className="content"
+        <li
+          className="primary-column"
           key="0"
         >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 1"
-            textStyle="strong"
-          />
-        </div>
-        <div
-          className="content"
+          <ul
+            className="column-list"
+            key="0"
+          >
+            <li
+              className="content content-primary-size content-primary-color"
+              key="0"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 1"
+                textStyle="primary"
+              />
+            </li>
+            <li
+              className="content content-secondary-size content-secondary-color"
+              key="1"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 3"
+                textStyle="primary"
+              />
+            </li>
+          </ul>
+        </li>
+        <li
+          className="secondary-column"
           key="1"
         >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 2"
-            textStyle="attention"
-          />
-        </div>
-        <div
-          className="content"
-          key="2"
+          <ul
+            className="column-list"
+            key="1"
+          >
+            <li
+              className="content content-primary-size content-primary-color"
+              key="0"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 2"
+                textStyle="primary"
+              />
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should render one column 1`] = `
+<div
+  className="item-view one-column"
+>
+  <div
+    className="body"
+  >
+    <div>
+      <div>
+        <ul
+          className="column-list-container"
         >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
+          <li
+            className="content content-primary-size content-primary-color"
+            key="0"
+          >
+            <ItemDisplay
+              iconAlignment="center"
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": null,
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": "span",
+                  "timeZone": null,
+                }
               }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 3"
-            textStyle="secondary"
-          />
-        </div>
-        <div
-          className="content"
-          key="3"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
+              isDisabled={false}
+              isTruncated={false}
+              text="display 1"
+              textStyle="primary"
+            />
+          </li>
+          <li
+            className="content content-secondary-size content-secondary-color"
+            key="1"
+          >
+            <ItemDisplay
+              iconAlignment="center"
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": null,
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": "span",
+                  "timeZone": null,
+                }
               }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 4"
-            textStyle="strikeThrough"
-          />
-        </div>
+              isDisabled={false}
+              isTruncated={false}
+              text="display 2"
+              textStyle="primary"
+            />
+          </li>
+        </ul>
       </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`should render one column 1`] = `
+exports[`should render several displays in an unordered list for one column layout 1`] = `
 <div
   className="item-view one-column"
 >
   <div
     className="body"
   >
-    <div
-      className="column-container"
-    >
-      <div
-        className="primary-column"
-        key="0"
-      >
-        <div
-          className="content content-primary-size content-primary-color"
-          key="0"
+    <div>
+      <div>
+        <ul
+          className="column-list-container"
         >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
+          <li
+            className="content content-primary-size content-primary-color"
+            key="0"
+          >
+            <ItemDisplay
+              iconAlignment="center"
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": null,
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": "span",
+                  "timeZone": null,
+                }
               }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 1"
-            textStyle="primary"
-          />
-        </div>
-        <div
-          className="content content-secondary-size content-secondary-color"
-          key="1"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
+              isDisabled={false}
+              isTruncated={false}
+              text="display 1"
+              textStyle="primary"
+            />
+          </li>
+          <li
+            className="content content-secondary-size content-primary-color"
+            key="1"
+          >
+            <ItemDisplay
+              iconAlignment="center"
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": null,
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": "span",
+                  "timeZone": null,
+                }
               }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 2"
-            textStyle="primary"
-          />
-        </div>
+              isDisabled={false}
+              isTruncated={false}
+              text="display 2"
+              textStyle="primary"
+            />
+          </li>
+          <li
+            className="content content-secondary-size content-secondary-color"
+            key="2"
+          >
+            <ItemDisplay
+              iconAlignment="center"
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": null,
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": "span",
+                  "timeZone": null,
+                }
+              }
+              isDisabled={false}
+              isTruncated={false}
+              text="display 3"
+              textStyle="primary"
+            />
+          </li>
+        </ul>
       </div>
     </div>
   </div>
@@ -720,51 +1053,45 @@ exports[`should render truncated display 1`] = `
     className="body"
   >
     <div
-      className="column-container"
+      className="single-result-column-container"
     >
       <div
-        className="primary-column"
-        key="0"
+        className="content content-primary-size content-primary-color"
       >
-        <div
-          className="content content-primary-size content-primary-color"
-          key="0"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
+        <ItemDisplay
+          iconAlignment="center"
+          intl={
+            Object {
+              "defaultFormats": Object {},
+              "defaultLocale": "en",
+              "formatDate": [Function],
+              "formatHTMLMessage": [Function],
+              "formatMessage": [Function],
+              "formatNumber": [Function],
+              "formatPlural": [Function],
+              "formatRelative": [Function],
+              "formatTime": [Function],
+              "formats": Object {},
+              "formatters": Object {
+                "getDateTimeFormat": [Function],
+                "getMessageFormat": [Function],
+                "getNumberFormat": [Function],
+                "getPluralFormat": [Function],
+                "getRelativeFormat": [Function],
+              },
+              "locale": "en",
+              "messages": null,
+              "now": [Function],
+              "onError": [Function],
+              "textComponent": "span",
+              "timeZone": null,
             }
-            isDisabled={false}
-            isTruncated={false}
-            text="display1display1display1display1display1display1display1display1"
-            textStyle="primary"
-          />
-        </div>
+          }
+          isDisabled={false}
+          isTruncated={false}
+          text="display1display1display1display1display1display1display1display1"
+          textStyle="primary"
+        />
       </div>
     </div>
   </div>
@@ -779,51 +1106,45 @@ exports[`should render truncated display when isTruncated is only set on the dis
     className="body"
   >
     <div
-      className="column-container"
+      className="single-result-column-container"
     >
       <div
-        className="primary-column"
-        key="0"
+        className="content content-primary-size content-primary-color"
       >
-        <div
-          className="content content-primary-size content-primary-color"
-          key="0"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
+        <ItemDisplay
+          iconAlignment="center"
+          intl={
+            Object {
+              "defaultFormats": Object {},
+              "defaultLocale": "en",
+              "formatDate": [Function],
+              "formatHTMLMessage": [Function],
+              "formatMessage": [Function],
+              "formatNumber": [Function],
+              "formatPlural": [Function],
+              "formatRelative": [Function],
+              "formatTime": [Function],
+              "formats": Object {},
+              "formatters": Object {
+                "getDateTimeFormat": [Function],
+                "getMessageFormat": [Function],
+                "getNumberFormat": [Function],
+                "getPluralFormat": [Function],
+                "getRelativeFormat": [Function],
+              },
+              "locale": "en",
+              "messages": null,
+              "now": [Function],
+              "onError": [Function],
+              "textComponent": "span",
+              "timeZone": null,
             }
-            isDisabled={false}
-            isTruncated={true}
-            text="display1display1display1display1display1display1display1display1"
-            textStyle="primary"
-          />
-        </div>
+          }
+          isDisabled={false}
+          isTruncated={true}
+          text="display1display1display1display1display1display1display1display1"
+          textStyle="primary"
+        />
       </div>
     </div>
   </div>
@@ -837,36 +1158,48 @@ exports[`should render truncated two column displays when isTruncated is only se
   <div
     className="body"
   >
-    <div
-      className="column-container"
-    >
-      <div
-        className="primary-column"
-        key="0"
+    <div>
+      <ul
+        className="column-list-container"
       >
-        <div
-          className="content content-primary-size content-primary-color"
+        <li
+          className="primary-column"
           key="0"
         >
-          <InjectIntl(ItemDisplay)
-            isTruncated={true}
-            text="display1display1display1display1display1display1display1display1"
-          />
-        </div>
-      </div>
-      <div
-        className="secondary-column"
-        key="1"
-      >
-        <div
-          className="content content-primary-size content-primary-color"
-          key="0"
+          <ul
+            className="column-list"
+            key="0"
+          >
+            <li
+              className="content content-primary-size content-primary-color"
+              key="0"
+            >
+              <InjectIntl(ItemDisplay)
+                isTruncated={true}
+                text="display1display1display1display1display1display1display1display1"
+              />
+            </li>
+          </ul>
+        </li>
+        <li
+          className="secondary-column"
+          key="1"
         >
-          <InjectIntl(ItemDisplay)
-            text="display2display2display2display2display2display2display2display2"
-          />
-        </div>
-      </div>
+          <ul
+            className="column-list"
+            key="1"
+          >
+            <li
+              className="content content-primary-size content-primary-color"
+              key="0"
+            >
+              <InjectIntl(ItemDisplay)
+                text="display2display2display2display2display2display2display2display2"
+              />
+            </li>
+          </ul>
+        </li>
+      </ul>
     </div>
   </div>
 </div>
@@ -879,331 +1212,343 @@ exports[`should render two columns with 8 displays 1`] = `
   <div
     className="body"
   >
-    <div
-      className="column-container"
-    >
-      <div
-        className="primary-column"
-        key="0"
-      >
-        <div
-          className="content content-primary-size content-primary-color"
-          key="0"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 1"
-            textStyle="primary"
-          />
-        </div>
-        <div
-          className="content content-secondary-size content-primary-color"
-          key="1"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 3"
-            textStyle="primary"
-          />
-        </div>
-        <div
-          className="content content-secondary-size content-secondary-color"
-          key="2"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 5"
-            textStyle="primary"
-          />
-        </div>
-        <div
-          className="content content-secondary-size content-secondary-color"
-          key="3"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 7"
-            textStyle="primary"
-          />
-        </div>
-      </div>
-      <div
-        className="secondary-column"
-        key="1"
+    <div>
+      <ul
+        className="column-list-container"
       >
-        <div
-          className="content content-primary-size content-primary-color"
+        <li
+          className="primary-column"
           key="0"
         >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 2"
-            textStyle="primary"
-          />
-        </div>
-        <div
-          className="content content-secondary-size content-primary-color"
+          <ul
+            className="column-list"
+            key="0"
+          >
+            <li
+              className="content content-primary-size content-primary-color"
+              key="0"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 1"
+                textStyle="primary"
+              />
+            </li>
+            <li
+              className="content content-secondary-size content-primary-color"
+              key="1"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 3"
+                textStyle="primary"
+              />
+            </li>
+            <li
+              className="content content-secondary-size content-secondary-color"
+              key="2"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 5"
+                textStyle="primary"
+              />
+            </li>
+            <li
+              className="content content-secondary-size content-secondary-color"
+              key="3"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 7"
+                textStyle="primary"
+              />
+            </li>
+          </ul>
+        </li>
+        <li
+          className="secondary-column"
           key="1"
         >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 4"
-            textStyle="primary"
-          />
-        </div>
-        <div
-          className="content content-secondary-size content-secondary-color"
-          key="2"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 6"
-            textStyle="primary"
-          />
-        </div>
-        <div
-          className="content content-secondary-size content-secondary-color"
-          key="3"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 8"
-            textStyle="primary"
-          />
-        </div>
-      </div>
+          <ul
+            className="column-list"
+            key="1"
+          >
+            <li
+              className="content content-primary-size content-primary-color"
+              key="0"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 2"
+                textStyle="primary"
+              />
+            </li>
+            <li
+              className="content content-secondary-size content-primary-color"
+              key="1"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 4"
+                textStyle="primary"
+              />
+            </li>
+            <li
+              className="content content-secondary-size content-secondary-color"
+              key="2"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 6"
+                textStyle="primary"
+              />
+            </li>
+            <li
+              className="content content-secondary-size content-secondary-color"
+              key="3"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 8"
+                textStyle="primary"
+              />
+            </li>
+          </ul>
+        </li>
+      </ul>
     </div>
   </div>
 </div>
@@ -1216,341 +1561,363 @@ exports[`should render two columns with 8 displays when trueColumn is false 1`]
   <div
     className="body"
   >
-    <div
-      className="row-container"
-    >
-      <div
-        className="row"
-        key="0"
-      >
-        <div
-          className="content content-primary-size content-primary-color"
-          key="0"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 1"
-            textStyle="primary"
-          />
-        </div>
-        <div
-          className="content content-primary-size content-primary-color"
-          key="1"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 2"
-            textStyle="primary"
-          />
-        </div>
-      </div>
-      <div
-        className="row"
-        key="1"
+    <div>
+      <ul
+        className="row-list-container"
       >
-        <div
-          className="content content-secondary-size content-primary-color"
+        <li
+          className="row"
           key="0"
         >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 3"
-            textStyle="primary"
-          />
-        </div>
-        <div
-          className="content content-secondary-size content-primary-color"
-          key="1"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 4"
-            textStyle="primary"
-          />
-        </div>
-      </div>
-      <div
-        className="row"
-        key="2"
-      >
-        <div
-          className="content content-secondary-size content-secondary-color"
-          key="0"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 5"
-            textStyle="primary"
-          />
-        </div>
-        <div
-          className="content content-secondary-size content-secondary-color"
+          <ul
+            className="row-list"
+            key="0"
+          >
+            <li
+              className="content content-primary-size content-primary-color"
+              key="0"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 1"
+                textStyle="primary"
+              />
+            </li>
+            <li
+              className="content content-primary-size content-primary-color"
+              key="1"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 2"
+                textStyle="primary"
+              />
+            </li>
+          </ul>
+        </li>
+        <li
+          className="row"
           key="1"
         >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 6"
-            textStyle="primary"
-          />
-        </div>
-      </div>
-      <div
-        className="row"
-        key="3"
-      >
-        <div
-          className="content content-secondary-size content-secondary-color"
-          key="0"
+          <ul
+            className="row-list"
+            key="1"
+          >
+            <li
+              className="content content-secondary-size content-primary-color"
+              key="0"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 3"
+                textStyle="primary"
+              />
+            </li>
+            <li
+              className="content content-secondary-size content-primary-color"
+              key="1"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 4"
+                textStyle="primary"
+              />
+            </li>
+          </ul>
+        </li>
+        <li
+          className="row"
+          key="2"
         >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 7"
-            textStyle="primary"
-          />
-        </div>
-        <div
-          className="content content-secondary-size content-secondary-color"
-          key="1"
+          <ul
+            className="row-list"
+            key="2"
+          >
+            <li
+              className="content content-secondary-size content-secondary-color"
+              key="0"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 5"
+                textStyle="primary"
+              />
+            </li>
+            <li
+              className="content content-secondary-size content-secondary-color"
+              key="1"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 6"
+                textStyle="primary"
+              />
+            </li>
+          </ul>
+        </li>
+        <li
+          className="row"
+          key="3"
         >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 8"
-            textStyle="primary"
-          />
-        </div>
-      </div>
+          <ul
+            className="row-list"
+            key="3"
+          >
+            <li
+              className="content content-secondary-size content-secondary-color"
+              key="0"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 7"
+                textStyle="primary"
+              />
+            </li>
+            <li
+              className="content content-secondary-size content-secondary-color"
+              key="1"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 8"
+                textStyle="primary"
+              />
+            </li>
+          </ul>
+        </li>
+      </ul>
     </div>
   </div>
 </div>
@@ -1563,136 +1930,148 @@ exports[`should render two columns with an odd number of displays 1`] = `
   <div
     className="body"
   >
-    <div
-      className="column-container"
-    >
-      <div
-        className="primary-column"
-        key="0"
+    <div>
+      <ul
+        className="column-list-container"
       >
-        <div
-          className="content content-primary-size content-primary-color"
+        <li
+          className="primary-column"
           key="0"
         >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 1"
-            textStyle="primary"
-          />
-        </div>
-        <div
-          className="content content-secondary-size content-secondary-color"
+          <ul
+            className="column-list"
+            key="0"
+          >
+            <li
+              className="content content-primary-size content-primary-color"
+              key="0"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 1"
+                textStyle="primary"
+              />
+            </li>
+            <li
+              className="content content-secondary-size content-secondary-color"
+              key="1"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 3"
+                textStyle="primary"
+              />
+            </li>
+          </ul>
+        </li>
+        <li
+          className="secondary-column"
           key="1"
         >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 3"
-            textStyle="primary"
-          />
-        </div>
-      </div>
-      <div
-        className="secondary-column"
-        key="1"
-      >
-        <div
-          className="content content-primary-size content-primary-color"
-          key="0"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 2"
-            textStyle="primary"
-          />
-        </div>
-      </div>
+          <ul
+            className="column-list"
+            key="1"
+          >
+            <li
+              className="content content-primary-size content-primary-color"
+              key="0"
+            >
+              <ItemDisplay
+                iconAlignment="center"
+                intl={
+                  Object {
+                    "defaultFormats": Object {},
+                    "defaultLocale": "en",
+                    "formatDate": [Function],
+                    "formatHTMLMessage": [Function],
+                    "formatMessage": [Function],
+                    "formatNumber": [Function],
+                    "formatPlural": [Function],
+                    "formatRelative": [Function],
+                    "formatTime": [Function],
+                    "formats": Object {},
+                    "formatters": Object {
+                      "getDateTimeFormat": [Function],
+                      "getMessageFormat": [Function],
+                      "getNumberFormat": [Function],
+                      "getPluralFormat": [Function],
+                      "getRelativeFormat": [Function],
+                    },
+                    "locale": "en",
+                    "messages": null,
+                    "now": [Function],
+                    "onError": [Function],
+                    "textComponent": "span",
+                    "timeZone": null,
+                  }
+                }
+                isDisabled={false}
+                isTruncated={false}
+                text="display 2"
+                textStyle="primary"
+              />
+            </li>
+          </ul>
+        </li>
+      </ul>
     </div>
   </div>
 </div>
@@ -1706,51 +2085,45 @@ exports[`should render with 1 display 1`] = `
     className="body"
   >
     <div
-      className="column-container"
+      className="single-result-column-container"
     >
       <div
-        className="primary-column"
-        key="0"
+        className="content content-primary-size content-primary-color"
       >
-        <div
-          className="content content-primary-size content-primary-color"
-          key="0"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
+        <ItemDisplay
+          iconAlignment="center"
+          intl={
+            Object {
+              "defaultFormats": Object {},
+              "defaultLocale": "en",
+              "formatDate": [Function],
+              "formatHTMLMessage": [Function],
+              "formatMessage": [Function],
+              "formatNumber": [Function],
+              "formatPlural": [Function],
+              "formatRelative": [Function],
+              "formatTime": [Function],
+              "formats": Object {},
+              "formatters": Object {
+                "getDateTimeFormat": [Function],
+                "getMessageFormat": [Function],
+                "getNumberFormat": [Function],
+                "getPluralFormat": [Function],
+                "getRelativeFormat": [Function],
+              },
+              "locale": "en",
+              "messages": null,
+              "now": [Function],
+              "onError": [Function],
+              "textComponent": "span",
+              "timeZone": null,
             }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 1"
-            textStyle="primary"
-          />
-        </div>
+          }
+          isDisabled={false}
+          isTruncated={false}
+          text="display 1"
+          textStyle="primary"
+        />
       </div>
     </div>
   </div>
@@ -1764,91 +2137,90 @@ exports[`should render with 2 displays 1`] = `
   <div
     className="body"
   >
-    <div
-      className="column-container"
-    >
-      <div
-        className="primary-column"
-        key="0"
-      >
-        <div
-          className="content content-primary-size content-primary-color"
-          key="0"
+    <div>
+      <div>
+        <ul
+          className="column-list-container"
         >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
+          <li
+            className="content content-primary-size content-primary-color"
+            key="0"
+          >
+            <ItemDisplay
+              iconAlignment="center"
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": null,
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": "span",
+                  "timeZone": null,
+                }
               }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 1"
-            textStyle="primary"
-          />
-        </div>
-        <div
-          className="content content-secondary-size content-secondary-color"
-          key="1"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
+              isDisabled={false}
+              isTruncated={false}
+              text="display 1"
+              textStyle="primary"
+            />
+          </li>
+          <li
+            className="content content-secondary-size content-secondary-color"
+            key="1"
+          >
+            <ItemDisplay
+              iconAlignment="center"
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": null,
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": "span",
+                  "timeZone": null,
+                }
               }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 2"
-            textStyle="primary"
-          />
-        </div>
+              isDisabled={false}
+              isTruncated={false}
+              text="display 2"
+              textStyle="primary"
+            />
+          </li>
+        </ul>
       </div>
     </div>
   </div>
@@ -1862,130 +2234,129 @@ exports[`should render with 3 displays 1`] = `
   <div
     className="body"
   >
-    <div
-      className="column-container"
-    >
-      <div
-        className="primary-column"
-        key="0"
-      >
-        <div
-          className="content content-primary-size content-primary-color"
-          key="0"
+    <div>
+      <div>
+        <ul
+          className="column-list-container"
         >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
+          <li
+            className="content content-primary-size content-primary-color"
+            key="0"
+          >
+            <ItemDisplay
+              iconAlignment="center"
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": null,
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": "span",
+                  "timeZone": null,
+                }
               }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 1"
-            textStyle="primary"
-          />
-        </div>
-        <div
-          className="content content-secondary-size content-primary-color"
-          key="1"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
+              isDisabled={false}
+              isTruncated={false}
+              text="display 1"
+              textStyle="primary"
+            />
+          </li>
+          <li
+            className="content content-secondary-size content-primary-color"
+            key="1"
+          >
+            <ItemDisplay
+              iconAlignment="center"
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": null,
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": "span",
+                  "timeZone": null,
+                }
               }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 2"
-            textStyle="primary"
-          />
-        </div>
-        <div
-          className="content content-secondary-size content-secondary-color"
-          key="2"
-        >
-          <ItemDisplay
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
+              isDisabled={false}
+              isTruncated={false}
+              text="display 2"
+              textStyle="primary"
+            />
+          </li>
+          <li
+            className="content content-secondary-size content-secondary-color"
+            key="2"
+          >
+            <ItemDisplay
+              iconAlignment="center"
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {},
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": null,
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": "span",
+                  "timeZone": null,
+                }
               }
-            }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 3"
-            textStyle="primary"
-          />
-        </div>
+              isDisabled={false}
+              isTruncated={false}
+              text="display 3"
+              textStyle="primary"
+            />
+          </li>
+        </ul>
       </div>
     </div>
   </div>
@@ -2000,56 +2371,50 @@ exports[`should render with a display and graphic 1`] = `
     className="body"
   >
     <div
-      className="column-container"
+      className="single-result-column-container"
     >
       <div
-        className="primary-column"
-        key="0"
+        className="content content-primary-size content-primary-color"
       >
-        <div
-          className="content content-primary-size content-primary-color"
-          key="0"
-        >
-          <ItemDisplay
-            icon={
-              <img
-                alt="Graphic"
-              />
-            }
-            iconAlignment="center"
-            intl={
-              Object {
-                "defaultFormats": Object {},
-                "defaultLocale": "en",
-                "formatDate": [Function],
-                "formatHTMLMessage": [Function],
-                "formatMessage": [Function],
-                "formatNumber": [Function],
-                "formatPlural": [Function],
-                "formatRelative": [Function],
-                "formatTime": [Function],
-                "formats": Object {},
-                "formatters": Object {
-                  "getDateTimeFormat": [Function],
-                  "getMessageFormat": [Function],
-                  "getNumberFormat": [Function],
-                  "getPluralFormat": [Function],
-                  "getRelativeFormat": [Function],
-                },
-                "locale": "en",
-                "messages": null,
-                "now": [Function],
-                "onError": [Function],
-                "textComponent": "span",
-                "timeZone": null,
-              }
+        <ItemDisplay
+          icon={
+            <img
+              alt="Graphic"
+            />
+          }
+          iconAlignment="center"
+          intl={
+            Object {
+              "defaultFormats": Object {},
+              "defaultLocale": "en",
+              "formatDate": [Function],
+              "formatHTMLMessage": [Function],
+              "formatMessage": [Function],
+              "formatNumber": [Function],
+              "formatPlural": [Function],
+              "formatRelative": [Function],
+              "formatTime": [Function],
+              "formats": Object {},
+              "formatters": Object {
+                "getDateTimeFormat": [Function],
+                "getMessageFormat": [Function],
+                "getNumberFormat": [Function],
+                "getPluralFormat": [Function],
+                "getRelativeFormat": [Function],
+              },
+              "locale": "en",
+              "messages": null,
+              "now": [Function],
+              "onError": [Function],
+              "textComponent": "span",
+              "timeZone": null,
             }
-            isDisabled={false}
-            isTruncated={false}
-            text="display 1"
-            textStyle="primary"
-          />
-        </div>
+          }
+          isDisabled={false}
+          isTruncated={false}
+          text="display 1"
+          textStyle="primary"
+        />
       </div>
     </div>
   </div>
diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_enormous/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_enormous/item-view-spec/with_a_singular_display.png
new file mode 100644
index 000000000..53bdcb9fb
Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_enormous/item-view-spec/with_a_singular_display.png differ
diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/item-view-spec/with_a_singular_display.png
new file mode 100644
index 000000000..0add96b01
Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/item-view-spec/with_a_singular_display.png differ
diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/item-view-spec/with_a_singular_display.png
new file mode 100644
index 000000000..090cd5bb8
Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/item-view-spec/with_a_singular_display.png differ
diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/item-view-spec/with_a_singular_display.png
new file mode 100644
index 000000000..aa76fcbfb
Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/item-view-spec/with_a_singular_display.png differ
diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_small/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_small/item-view-spec/with_a_singular_display.png
new file mode 100644
index 000000000..22764c3ed
Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_small/item-view-spec/with_a_singular_display.png differ
diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/item-view-spec/with_a_singular_display.png
new file mode 100644
index 000000000..b7547e8b6
Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/item-view-spec/with_a_singular_display.png differ
diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_enormous/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_enormous/item-view-spec/with_a_singular_display.png
new file mode 100644
index 000000000..320c06905
Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_enormous/item-view-spec/with_a_singular_display.png differ
diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/item-view-spec/with_a_singular_display.png
new file mode 100644
index 000000000..7e6ad0e2e
Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/item-view-spec/with_a_singular_display.png differ
diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/item-view-spec/with_a_singular_display.png
new file mode 100644
index 000000000..419e38d4a
Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/item-view-spec/with_a_singular_display.png differ
diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/item-view-spec/with_a_singular_display.png
new file mode 100644
index 000000000..cce1ebee2
Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/item-view-spec/with_a_singular_display.png differ
diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_small/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_small/item-view-spec/with_a_singular_display.png
new file mode 100644
index 000000000..2e53629ea
Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_small/item-view-spec/with_a_singular_display.png differ
diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/item-view-spec/with_a_singular_display.png
new file mode 100644
index 000000000..de29f0168
Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/item-view-spec/with_a_singular_display.png differ
diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_enormous/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_enormous/item-view-spec/with_a_singular_display.png
new file mode 100644
index 000000000..4af7f59d1
Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_enormous/item-view-spec/with_a_singular_display.png differ
diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_huge/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_huge/item-view-spec/with_a_singular_display.png
new file mode 100644
index 000000000..608d8eb71
Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_huge/item-view-spec/with_a_singular_display.png differ
diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/item-view-spec/with_a_singular_display.png
new file mode 100644
index 000000000..4e1d8c681
Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/item-view-spec/with_a_singular_display.png differ
diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/item-view-spec/with_a_singular_display.png
new file mode 100644
index 000000000..58481f651
Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/item-view-spec/with_a_singular_display.png differ
diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_small/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_small/item-view-spec/with_a_singular_display.png
new file mode 100644
index 000000000..4afd21a0f
Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_small/item-view-spec/with_a_singular_display.png differ
diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/item-view-spec/with_a_singular_display.png
new file mode 100644
index 000000000..9726401f7
Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/item-view-spec/with_a_singular_display.png differ
diff --git a/packages/terra-clinical-item-view/tests/wdio/item-view-spec.js b/packages/terra-clinical-item-view/tests/wdio/item-view-spec.js
index 4382d08ea..6f6448f09 100644
--- a/packages/terra-clinical-item-view/tests/wdio/item-view-spec.js
+++ b/packages/terra-clinical-item-view/tests/wdio/item-view-spec.js
@@ -7,6 +7,12 @@ Terra.describeViewports('Clinical Item View', ['tiny', 'small', 'medium', 'large
     Terra.validates.element('with two column and start displays', { selector: '#test-displays-two-start' });
   });
 
+  it('renders with a singular display', () => {
+    browser.url('/raw/tests/terra-clinical-item-view/clinical-item-view/single-display-item-view');
+
+    Terra.validates.element('with a singular display', { selector: '#test-single-display' });
+  });
+
   it('renders with displays by row', () => {
     browser.url('/raw/tests/terra-clinical-item-view/clinical-item-view/displays-item-view-by-row');