diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index bd5911cadad3..d6c7bfb4d0d9 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -3691,7 +3691,6 @@ $spacing-03: $carbon--spacing-03;
   - [snippet [mixin]](#snippet-mixin)
   - [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
   - [data-table-core [mixin]](#data-table-core-mixin)
-  - [data-table-expandable [mixin]](#data-table-expandable-mixin)
   - [data-table-sort [mixin]](#data-table-sort-mixin)
   - [modal [mixin]](#modal-mixin)
   - [select [mixin]](#select-mixin)
@@ -15776,7 +15775,7 @@ Data table core styles
 
   .#{$prefix}--data-table th,
   .#{$prefix}--data-table td {
-    vertical-align: top;
+    vertical-align: middle;
     text-align: left;
   }
 
@@ -15797,8 +15796,8 @@ Data table core styles
   }
 
   .#{$prefix}--data-table .#{$prefix}--table-header-label {
-    display: block;
-    padding: rem(14px) $spacing-05;
+    padding-left: $spacing-05;
+    padding-right: $spacing-05;
     text-align: left;
   }
 
@@ -15808,8 +15807,8 @@ Data table core styles
     color: $text-02;
     border-top: 1px solid $ui-01;
     border-bottom: 1px solid $ui-03;
-    padding: rem(14px) $spacing-05;
-    padding-bottom: rem(13px);
+    padding-left: $spacing-05;
+    padding-right: $spacing-05;
 
     + td:first-of-type {
       padding-left: $spacing-04;
@@ -15948,22 +15947,33 @@ Data table core styles
     // Do not use `position: relative`, as its behavior is undefined for many table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position
     position: static;
     background: $ui-03;
-    padding: rem(12px) $spacing-03 0 $spacing-05;
+    padding-left: $spacing-05;
+    padding-right: $spacing-05;
     width: rem(
       44px
     ); // 16px padding left + 8px padding right + 20px checkbox width
     transition: background-color $duration--fast-01 motion(entrance, productive);
   }
 
-  .#{$prefix}--data-table td.#{$prefix}--table-column-checkbox {
-    padding-top: rem(11px);
-    padding-bottom: 0;
+  .#{$prefix}--data-table--tall .#{$prefix}--table-column-checkbox {
+    padding-top: rem(13px);
+  }
+
+  .#{$prefix}--data-table--tall .#{$prefix}--table-column-radio {
+    padding-top: $spacing-05;
   }
 
   .#{$prefix}--date-table tbody th.#{$prefix}--table-column-checkbox:hover {
     background: $data-table-column-hover;
   }
 
+  //----------------------------------------------------------------------------
+  // Radio
+  //----------------------------------------------------------------------------
+  .#{$prefix}--table-column-radio {
+    width: 48px;
+  }
+
   // default selected row + zebra select - even child
   .#{$prefix}--data-table--zebra
     tbody
@@ -16120,13 +16130,13 @@ Data table core styles
     padding-top: 1rem;
   }
 
-  .#{$prefix}--data-table--cell-secondary-text {
-    @include type-style('label-01');
+  .#{$prefix}--data-table--tall th,
+  .#{$prefix}--data-table--tall td {
+    vertical-align: top;
   }
 
-  .#{$prefix}--data-table.#{$prefix}--data-table--tall
-    .#{$prefix}--table-column-checkbox {
-    padding-top: rem(12px);
+  .#{$prefix}--data-table--cell-secondary-text {
+    @include type-style('label-01');
   }
 
   //----------------------------------------------------------------------------
@@ -16358,7 +16368,7 @@ Data table expandable styles
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover td:first-of-type {
-    border-bottom: 1px solid transparent; // first td doesn't have a visible border
+    border-bottom: 1px solid $hover-ui; // first td doesn't have a visible border
   }
 
   // child row when hovering on expanded parent
@@ -16398,12 +16408,20 @@ Data table expandable styles
   .#{$prefix}--data-table td.#{$prefix}--table-expand {
     width: 2.5rem;
     min-width: 2.5rem;
-    height: 3rem;
-    vertical-align: top;
-    padding: 0;
     border-bottom: 1px solid $ui-03;
   }
 
+  .#{$prefix}--data-table td.#{$prefix}--table-expand,
+  th.#{$prefix}--table-expand {
+    padding: 0 $spacing-05;
+  }
+
+  .#{$prefix}--data-table--tall td.#{$prefix}--table-expand,
+  .#{$prefix}--data-table--tall th.#{$prefix}--table-expand {
+    padding-top: rem(16px);
+    padding-bottom: rem(16px);
+  }
+
   .#{$prefix}--data-table
     td.#{$prefix}--table-expand[data-previous-value='collapsed'] {
     border-bottom: 1px solid transparent;
@@ -16417,15 +16435,8 @@ Data table expandable styles
 
   .#{$prefix}--table-expand__button {
     @include button-reset('false');
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-  }
-
-  .#{$prefix}--data-table--short .#{$prefix}--table-expand__button {
-    height: auto;
+    height: rem(16px);
+    vertical-align: inherit;
   }
 
   .#{$prefix}--table-expand__button:focus {
@@ -16442,17 +16453,6 @@ Data table expandable styles
     transition: transform $duration--moderate-01 motion(standard, productive);
   }
 
-  th.#{$prefix}--table-expand {
-    position: relative;
-    vertical-align: middle;
-    padding-left: $spacing-05;
-    padding-right: $spacing-05;
-  }
-
-  th.#{$prefix}--table-expand + th.#{$prefix}--table-column-checkbox {
-    padding-left: $spacing-03;
-  }
-
   // fix expanded parent separating border length
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
     td.#{$prefix}--table-expand
@@ -16624,7 +16624,6 @@ Data table expandable styles
   - [text-01 [variable]](#text-01-variable)
   - [focus [variable]](#focus-variable)
   - [ui-05 [variable]](#ui-05-variable)
-  - [spacing-03 [variable]](#spacing-03-variable)
   - [ui-01 [variable]](#ui-01-variable)
   - [hover-field [variable]](#hover-field-variable)
   - [selected-ui [variable]](#selected-ui-variable)
diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss
index e426067f4fe3..6470f18c9a0e 100644
--- a/packages/components/src/components/data-table/_data-table-core.scss
+++ b/packages/components/src/components/data-table/_data-table-core.scss
@@ -87,7 +87,7 @@
 
   .#{$prefix}--data-table th,
   .#{$prefix}--data-table td {
-    vertical-align: top;
+    vertical-align: middle;
     text-align: left;
   }
 
@@ -108,8 +108,8 @@
   }
 
   .#{$prefix}--data-table .#{$prefix}--table-header-label {
-    display: block;
-    padding: rem(14px) $spacing-05;
+    padding-left: $spacing-05;
+    padding-right: $spacing-05;
     text-align: left;
   }
 
@@ -119,8 +119,8 @@
     color: $text-02;
     border-top: 1px solid $ui-01;
     border-bottom: 1px solid $ui-03;
-    padding: rem(14px) $spacing-05;
-    padding-bottom: rem(13px);
+    padding-left: $spacing-05;
+    padding-right: $spacing-05;
 
     + td:first-of-type {
       padding-left: $spacing-04;
@@ -259,22 +259,33 @@
     // Do not use `position: relative`, as its behavior is undefined for many table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position
     position: static;
     background: $ui-03;
-    padding: rem(12px) $spacing-03 0 $spacing-05;
+    padding-left: $spacing-05;
+    padding-right: $spacing-05;
     width: rem(
       44px
     ); // 16px padding left + 8px padding right + 20px checkbox width
     transition: background-color $duration--fast-01 motion(entrance, productive);
   }
 
-  .#{$prefix}--data-table td.#{$prefix}--table-column-checkbox {
-    padding-top: rem(11px);
-    padding-bottom: 0;
+  .#{$prefix}--data-table--tall .#{$prefix}--table-column-checkbox {
+    padding-top: rem(13px);
+  }
+
+  .#{$prefix}--data-table--tall .#{$prefix}--table-column-radio {
+    padding-top: $spacing-05;
   }
 
   .#{$prefix}--date-table tbody th.#{$prefix}--table-column-checkbox:hover {
     background: $data-table-column-hover;
   }
 
+  //----------------------------------------------------------------------------
+  // Radio
+  //----------------------------------------------------------------------------
+  .#{$prefix}--table-column-radio {
+    width: 48px;
+  }
+
   // default selected row + zebra select - even child
   .#{$prefix}--data-table--zebra
     tbody
@@ -431,13 +442,13 @@
     padding-top: 1rem;
   }
 
-  .#{$prefix}--data-table--cell-secondary-text {
-    @include type-style('label-01');
+  .#{$prefix}--data-table--tall th,
+  .#{$prefix}--data-table--tall td {
+    vertical-align: top;
   }
 
-  .#{$prefix}--data-table.#{$prefix}--data-table--tall
-    .#{$prefix}--table-column-checkbox {
-    padding-top: rem(12px);
+  .#{$prefix}--data-table--cell-secondary-text {
+    @include type-style('label-01');
   }
 
   //----------------------------------------------------------------------------
diff --git a/packages/components/src/components/data-table/_data-table-expandable.scss b/packages/components/src/components/data-table/_data-table-expandable.scss
index b659c039d901..4fd88e227a37 100644
--- a/packages/components/src/components/data-table/_data-table-expandable.scss
+++ b/packages/components/src/components/data-table/_data-table-expandable.scss
@@ -120,7 +120,7 @@
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover td:first-of-type {
-    border-bottom: 1px solid transparent; // first td doesn't have a visible border
+    border-bottom: 1px solid $hover-ui; // first td doesn't have a visible border
   }
 
   // child row when hovering on expanded parent
@@ -160,12 +160,20 @@
   .#{$prefix}--data-table td.#{$prefix}--table-expand {
     width: 2.5rem;
     min-width: 2.5rem;
-    height: 3rem;
-    vertical-align: top;
-    padding: 0;
     border-bottom: 1px solid $ui-03;
   }
 
+  .#{$prefix}--data-table td.#{$prefix}--table-expand,
+  th.#{$prefix}--table-expand {
+    padding: 0 $spacing-05;
+  }
+
+  .#{$prefix}--data-table--tall td.#{$prefix}--table-expand,
+  .#{$prefix}--data-table--tall th.#{$prefix}--table-expand {
+    padding-top: rem(16px);
+    padding-bottom: rem(16px);
+  }
+
   .#{$prefix}--data-table
     td.#{$prefix}--table-expand[data-previous-value='collapsed'] {
     border-bottom: 1px solid transparent;
@@ -179,15 +187,8 @@
 
   .#{$prefix}--table-expand__button {
     @include button-reset('false');
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-  }
-
-  .#{$prefix}--data-table--short .#{$prefix}--table-expand__button {
-    height: auto;
+    height: rem(16px);
+    vertical-align: inherit;
   }
 
   .#{$prefix}--table-expand__button:focus {
@@ -204,17 +205,6 @@
     transition: transform $duration--moderate-01 motion(standard, productive);
   }
 
-  th.#{$prefix}--table-expand {
-    position: relative;
-    vertical-align: middle;
-    padding-left: $spacing-05;
-    padding-right: $spacing-05;
-  }
-
-  th.#{$prefix}--table-expand + th.#{$prefix}--table-column-checkbox {
-    padding-left: $spacing-03;
-  }
-
   // fix expanded parent separating border length
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
     td.#{$prefix}--table-expand
diff --git a/packages/react/src/components/DataTable/TableHeader.js b/packages/react/src/components/DataTable/TableHeader.js
index d0575959f471..3670e09e63cf 100644
--- a/packages/react/src/components/DataTable/TableHeader.js
+++ b/packages/react/src/components/DataTable/TableHeader.js
@@ -70,7 +70,7 @@ const TableHeader = React.forwardRef(function TableHeader(
         scope={scope}
         colSpan={colSpan}
         ref={ref}>
-        <span className={`${prefix}--table-header-label`}>{children}</span>
+        <div className={`${prefix}--table-header-label`}>{children}</div>
       </th>
     );
   }
@@ -92,7 +92,7 @@ const TableHeader = React.forwardRef(function TableHeader(
       ref={ref}
       scope={scope}>
       <button className={className} onClick={onClick} {...rest}>
-        <span className={`${prefix}--table-header-label`}>{children}</span>
+        <div className={`${prefix}--table-header-label`}>{children}</div>
         <Arrow
           className={`${prefix}--table-sort__icon`}
           aria-label={t('carbon.table.header.icon.description', {
diff --git a/packages/react/src/components/DataTable/TableSelectRow.js b/packages/react/src/components/DataTable/TableSelectRow.js
index a45ece6cb374..e3541ecbfb4a 100644
--- a/packages/react/src/components/DataTable/TableSelectRow.js
+++ b/packages/react/src/components/DataTable/TableSelectRow.js
@@ -33,6 +33,7 @@ const TableSelectRow = ({
   const InlineInputComponent = radio ? RadioButton : InlineCheckbox;
   const tableSelectRowClasses = classNames(`${prefix}--table-column-checkbox`, {
     [className]: className,
+    [`${prefix}--table-column-radio`]: radio,
   });
   return (
     <td className={tableSelectRowClasses}>
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
index 70426f89177f..f2d7d5787248 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -142,11 +142,11 @@ exports[`DataTable selection -- radio buttons should not have select-all checkbo
                     <th
                       scope="col"
                     >
-                      <span
+                      <div
                         className="bx--table-header-label"
                       >
                         Field A
-                      </span>
+                      </div>
                     </th>
                   </TableHeader>
                   <TableHeader
@@ -161,11 +161,11 @@ exports[`DataTable selection -- radio buttons should not have select-all checkbo
                     <th
                       scope="col"
                     >
-                      <span
+                      <div
                         className="bx--table-header-label"
                       >
                         Field B
-                      </span>
+                      </div>
                     </th>
                   </TableHeader>
                 </tr>
@@ -489,11 +489,11 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
                     <th
                       scope="col"
                     >
-                      <span
+                      <div
                         className="bx--table-header-label"
                       >
                         Field A
-                      </span>
+                      </div>
                     </th>
                   </TableHeader>
                   <TableHeader
@@ -508,11 +508,11 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
                     <th
                       scope="col"
                     >
-                      <span
+                      <div
                         className="bx--table-header-label"
                       >
                         Field B
-                      </span>
+                      </div>
                     </th>
                   </TableHeader>
                 </tr>
@@ -539,7 +539,7 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
                     radio={true}
                   >
                     <td
-                      className="bx--table-column-checkbox"
+                      className="bx--table-column-checkbox bx--table-column-radio"
                     >
                       <ForwardRef(RadioButton)
                         checked={false}
@@ -625,7 +625,7 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
                     radio={true}
                   >
                     <td
-                      className="bx--table-column-checkbox"
+                      className="bx--table-column-checkbox bx--table-column-radio"
                     >
                       <ForwardRef(RadioButton)
                         checked={false}
@@ -711,7 +711,7 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
                     radio={true}
                   >
                     <td
-                      className="bx--table-column-checkbox"
+                      className="bx--table-column-checkbox bx--table-column-radio"
                     >
                       <ForwardRef(RadioButton)
                         checked={false}
@@ -989,11 +989,11 @@ exports[`DataTable selection should have select-all default to un-checked if no
                     <th
                       scope="col"
                     >
-                      <span
+                      <div
                         className="bx--table-header-label"
                       >
                         Field A
-                      </span>
+                      </div>
                     </th>
                   </TableHeader>
                   <TableHeader
@@ -1008,11 +1008,11 @@ exports[`DataTable selection should have select-all default to un-checked if no
                     <th
                       scope="col"
                     >
-                      <span
+                      <div
                         className="bx--table-header-label"
                       >
                         Field B
-                      </span>
+                      </div>
                     </th>
                   </TableHeader>
                 </tr>
@@ -1391,11 +1391,11 @@ exports[`DataTable selection should render 1`] = `
                     <th
                       scope="col"
                     >
-                      <span
+                      <div
                         className="bx--table-header-label"
                       >
                         Field A
-                      </span>
+                      </div>
                     </th>
                   </TableHeader>
                   <TableHeader
@@ -1410,11 +1410,11 @@ exports[`DataTable selection should render 1`] = `
                     <th
                       scope="col"
                     >
-                      <span
+                      <div
                         className="bx--table-header-label"
                       >
                         Field B
-                      </span>
+                      </div>
                     </th>
                   </TableHeader>
                 </tr>
@@ -2523,11 +2523,11 @@ exports[`DataTable should render 1`] = `
                     <th
                       scope="col"
                     >
-                      <span
+                      <div
                         className="bx--table-header-label"
                       >
                         Field A
-                      </span>
+                      </div>
                     </th>
                   </TableHeader>
                   <TableHeader
@@ -2542,11 +2542,11 @@ exports[`DataTable should render 1`] = `
                     <th
                       scope="col"
                     >
-                      <span
+                      <div
                         className="bx--table-header-label"
                       >
                         Field B
-                      </span>
+                      </div>
                     </th>
                   </TableHeader>
                 </tr>
@@ -3516,11 +3516,11 @@ exports[`DataTable sticky header should render 1`] = `
                       <th
                         scope="col"
                       >
-                        <span
+                        <div
                           className="bx--table-header-label"
                         >
                           Field A
-                        </span>
+                        </div>
                       </th>
                     </TableHeader>
                     <TableHeader
@@ -3535,11 +3535,11 @@ exports[`DataTable sticky header should render 1`] = `
                       <th
                         scope="col"
                       >
-                        <span
+                        <div
                           className="bx--table-header-label"
                         >
                           Field B
-                        </span>
+                        </div>
                       </th>
                     </TableHeader>
                   </tr>
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableHeader-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableHeader-test.js.snap
index 2d6fbe65c8f4..cc8696fce703 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableHeader-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableHeader-test.js.snap
@@ -23,11 +23,11 @@ exports[`DataTable.TableHeader should have an active and ascending class if sort
               <th
                 scope="col"
               >
-                <span
+                <div
                   className="bx--table-header-label"
                 >
                   Header
-                </span>
+                </div>
               </th>
             </TableHeader>
           </tr>
@@ -61,11 +61,11 @@ exports[`DataTable.TableHeader should have an active class if it is the sort hea
               <th
                 scope="col"
               >
-                <span
+                <div
                   className="bx--table-header-label"
                 >
                   Header
-                </span>
+                </div>
               </th>
             </TableHeader>
           </tr>
@@ -99,11 +99,11 @@ exports[`DataTable.TableHeader should render 1`] = `
               <th
                 scope="col"
               >
-                <span
+                <div
                   className="bx--table-header-label"
                 >
                   Header
-                </span>
+                </div>
               </th>
             </TableHeader>
           </tr>
@@ -137,11 +137,11 @@ exports[`DataTable.TableHeader should render 2`] = `
               <th
                 scope="col"
               >
-                <span
+                <div
                   className="bx--table-header-label"
                 >
                   Header
-                </span>
+                </div>
               </th>
             </TableHeader>
           </tr>
diff --git a/packages/react/src/components/DataTable/stories/with-batch-expansion.js b/packages/react/src/components/DataTable/stories/with-batch-expansion.js
index d5fa0226e574..ae948d5f4ddb 100644
--- a/packages/react/src/components/DataTable/stories/with-batch-expansion.js
+++ b/packages/react/src/components/DataTable/stories/with-batch-expansion.js
@@ -19,6 +19,7 @@ import DataTable, {
   TableRow,
 } from '../../DataTable';
 import { initialRows, headers } from './shared';
+import './with-expansion-story.scss';
 
 export default (props) => (
   <DataTable
@@ -60,9 +61,11 @@ export default (props) => (
                     <TableCell key={cell.id}>{cell.value}</TableCell>
                   ))}
                 </TableExpandRow>
-                <TableExpandedRow colSpan={headers.length + 1}>
-                  <h1>Expandable row content</h1>
-                  <p>Description here</p>
+                <TableExpandedRow
+                  colSpan={headers.length + 1}
+                  className="demo-expanded-td">
+                  <h6>Expandable row content</h6>
+                  <div>Description here</div>
                 </TableExpandedRow>
               </React.Fragment>
             ))}
diff --git a/packages/react/src/components/DataTable/stories/with-boolean-column-story.scss b/packages/react/src/components/DataTable/stories/with-boolean-column-story.scss
new file mode 100644
index 000000000000..55abe5e32db3
--- /dev/null
+++ b/packages/react/src/components/DataTable/stories/with-boolean-column-story.scss
@@ -0,0 +1,3 @@
+.bx--data-table .bx--form-item.bx--checkbox-wrapper:last-of-type {
+  margin: 0;
+}
diff --git a/packages/react/src/components/DataTable/stories/with-boolean-column.js b/packages/react/src/components/DataTable/stories/with-boolean-column.js
index f90bc40e3846..60971bead9df 100644
--- a/packages/react/src/components/DataTable/stories/with-boolean-column.js
+++ b/packages/react/src/components/DataTable/stories/with-boolean-column.js
@@ -16,7 +16,7 @@ import DataTable, {
   TableHeader,
   TableRow,
 } from '../../DataTable';
-// import { initialRows, headers } from './shared';
+import './with-boolean-column-story.scss';
 
 const initialRows = [
   {
@@ -122,7 +122,7 @@ export default (props) => (
                         <Checkbox
                           id={'check-' + cell.id}
                           checked={cell.value}
-                          labelText=""
+                          hideLabel
                         />
                       </TableCell>
                     );
diff --git a/packages/react/src/components/DataTable/stories/with-dynamic-content-story.scss b/packages/react/src/components/DataTable/stories/with-dynamic-content-story.scss
new file mode 100644
index 000000000000..39309b50e817
--- /dev/null
+++ b/packages/react/src/components/DataTable/stories/with-dynamic-content-story.scss
@@ -0,0 +1,5 @@
+.demo-expanded-td td {
+  padding-left: 4rem;
+  padding-bottom: 1.5rem;
+  padding-top: 1rem;
+}
diff --git a/packages/react/src/components/DataTable/stories/with-dynamic-content.js b/packages/react/src/components/DataTable/stories/with-dynamic-content.js
index 6a32c153ba78..146b716b400f 100644
--- a/packages/react/src/components/DataTable/stories/with-dynamic-content.js
+++ b/packages/react/src/components/DataTable/stories/with-dynamic-content.js
@@ -34,6 +34,7 @@ import DataTable, {
   TableToolbarMenu,
 } from '../../DataTable';
 import { batchActionClick, initialRows, headers } from './shared';
+import './with-dynamic-content-story.scss';
 
 export default (props) => {
   const insertInRandomPosition = (array, element) => {
@@ -175,9 +176,11 @@ export default (props) => {
                           <TableCell key={cell.id}>{cell.value}</TableCell>
                         ))}
                       </TableExpandRow>
-                      <TableExpandedRow colSpan={headers.length + 3}>
-                        <h1>Expandable row content</h1>
-                        <p>Description here</p>
+                      <TableExpandedRow
+                        colSpan={headers.length + 3}
+                        className="demo-expanded-td">
+                        <h6>Expandable row content</h6>
+                        <div>Description here</div>
                       </TableExpandedRow>
                     </React.Fragment>
                   ))}
diff --git a/packages/react/src/components/DataTable/stories/with-expansion-story.scss b/packages/react/src/components/DataTable/stories/with-expansion-story.scss
new file mode 100644
index 000000000000..9cb26f79cc4a
--- /dev/null
+++ b/packages/react/src/components/DataTable/stories/with-expansion-story.scss
@@ -0,0 +1,18 @@
+@import '~@carbon/type/scss/type';
+@import '~@carbon/themes/scss/themes';
+
+.demo-expanded-td td {
+  padding-left: 4rem;
+  padding-bottom: 1.5rem;
+  padding-top: 1rem;
+}
+
+.demo-inner-container-header {
+  @include carbon--type-style('productive-heading-01');
+  color: $text-01;
+}
+
+.demo-inner-container-content {
+  @include carbon--type-style('body-long-01');
+  color: $text-02;
+}
diff --git a/packages/react/src/components/DataTable/stories/with-expansion.js b/packages/react/src/components/DataTable/stories/with-expansion.js
index 5631f1c546b8..70962b7bd55c 100644
--- a/packages/react/src/components/DataTable/stories/with-expansion.js
+++ b/packages/react/src/components/DataTable/stories/with-expansion.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import './datatable-story.scss';
+import './with-expansion-story.scss';
 
 import React from 'react';
 import DataTable, {
@@ -61,12 +61,8 @@ export default (props) => (
                 <TableExpandedRow
                   colSpan={headers.length + 1}
                   className="demo-expanded-td">
-                  <h1 className="demo-inner-container-header">
-                    Expandable row content
-                  </h1>
-                  <p className="demo-inner-container-content">
-                    Description here
-                  </p>
+                  <h6>Expandable row content</h6>
+                  <div>Description here</div>
                 </TableExpandedRow>
               </React.Fragment>
             ))}
diff --git a/packages/react/src/components/DataTable/stories/with-options.js b/packages/react/src/components/DataTable/stories/with-options.js
index 84b17b931d40..0619f2ddf87c 100644
--- a/packages/react/src/components/DataTable/stories/with-options.js
+++ b/packages/react/src/components/DataTable/stories/with-options.js
@@ -21,6 +21,7 @@ import DataTable, {
   TableSelectRow,
 } from '..';
 import { headers, initialRows } from './shared';
+import './with-expansion-story.scss';
 
 export default (props) => (
   <DataTable
@@ -65,9 +66,11 @@ export default (props) => (
                     <TableCell key={cell.id}>{cell.value}</TableCell>
                   ))}
                 </TableExpandRow>
-                <TableExpandedRow colSpan={headers.length + 2}>
-                  <h1>Expandable row content</h1>
-                  <p>Description here</p>
+                <TableExpandedRow
+                  colSpan={headers.length + 2}
+                  className="demo-expanded-td">
+                  <h6>Expandable row content</h6>
+                  <div>Description here</div>
                 </TableExpandedRow>
               </React.Fragment>
             ))}