diff --git a/e2e/questions/panel.spec.ts b/e2e/questions/panel.spec.ts
index e5b98242ae..c51baa0273 100644
--- a/e2e/questions/panel.spec.ts
+++ b/e2e/questions/panel.spec.ts
@@ -75,8 +75,9 @@ frameworks.forEach((framework) => {
       const getTitle3 = page.locator(".sd-element__title").filter({ hasText: "question3" });
       const getTitle4 = page.locator(".sd-element__title").filter({ hasText: "question4" });
 
+      // TODO: Check whether this test actual for new rendering
       const getPanelsCountByMargin = await page.evaluate(
-        () => (window as any).survey.rootElement.getRootNode().querySelectorAll('div[style*="padding-left: 20px"]').length
+        () => (window as any).survey.rootElement.getRootNode().querySelectorAll('div[style*="padding-inline-start"][style*="20px"]').length
       );
 
       await expect(getTitle1).toBeVisible({ timeout: 1000 });
diff --git a/packages/survey-angular-ui/src/page.component.html b/packages/survey-angular-ui/src/page.component.html
index 1b2d538395..2396fc7bc9 100644
--- a/packages/survey-angular-ui/src/page.component.html
+++ b/packages/survey-angular-ui/src/page.component.html
@@ -1,16 +1,20 @@
 <ng-template #template>
   <ng-container *ngIf="!!this.survey && !!this.model && this.model.isVisible && !!this.model.survey">
     <div [class]="model.cssRoot" #pageContainer>
-      <sv-ng-element-title [element]="model"></sv-ng-element-title>
-      <div *ngIf="model._showDescription" [class]="model.cssClasses.page?.description">
-        <sv-ng-string [model]="model.locDescription"></sv-ng-string>
+      <div *ngIf="model.hasTitle || model._showDescription" [class]="model.cssHeader">
+        <sv-ng-element-title [element]="model"></sv-ng-element-title>
+        <div *ngIf="model._showDescription" [class]="model.cssClasses.page?.description">
+          <sv-ng-string [model]="model.locDescription"></sv-ng-string>
+        </div>
+      </div>
+      <div [class]="model.cssContent">
+        <div *ngIf="model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
+        <ng-container *ngFor="let row of model.visibleRows">
+          <ng-template [component]="{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }">
+            <sv-ng-row [row]="row"></sv-ng-row>
+          </ng-template>
+        </ng-container>
       </div>
-      <div *ngIf="model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
-      <ng-container *ngFor="let row of model.visibleRows">
-        <ng-template [component]="{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }">
-          <sv-ng-row [row]="row"></sv-ng-row>
-        </ng-template>
-      </ng-container>
     </div>
   </ng-container>  
 </ng-template>
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/panel.component.html b/packages/survey-angular-ui/src/panel.component.html
index 1f369a34b7..5e4a619112 100644
--- a/packages/survey-angular-ui/src/panel.component.html
+++ b/packages/survey-angular-ui/src/panel.component.html
@@ -3,14 +3,14 @@
     <div *ngIf="model.showErrorsAbovePanel && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
     <div *ngIf="model.hasDescription || model.hasTitle" [element]="model" sv-ng-element-header></div>
     <div *ngIf="!model.showErrorsAbovePanel && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
-    <div *ngIf="model.renderedIsExpanded" [style.paddingLeft]="model.innerPaddingLeft" [class]="model.cssClasses.panel.content" 
+    <div *ngIf="model.renderedIsExpanded" [style]="panelContentStyle" [class]="model.cssClasses.panel.content" 
       [attr.id]="model.contentId" [attr.role]="model.ariaRole" [attr.aria-labelledby]="model.ariaLabelledBy"[attr.aria-label]="model.ariaLabel">
       <ng-container *ngFor="let row of model.visibleRows; trackBy: trackRowBy">
         <ng-template [component]="{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }">
           <sv-ng-row [row]="row"></sv-ng-row>
         </ng-template>
       </ng-container>
-      <sv-ng-action-bar [model]="model.getFooterToolbar()"></sv-ng-action-bar>
     </div>
+    <sv-ng-action-bar *ngIf="model.renderedIsExpanded && model.getFooterToolbar().hasActions" [model]="model.getFooterToolbar()"></sv-ng-action-bar>
   </div>
 </ng-template>
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/panel.component.ts b/packages/survey-angular-ui/src/panel.component.ts
index 045ed316b8..b22be90a67 100644
--- a/packages/survey-angular-ui/src/panel.component.ts
+++ b/packages/survey-angular-ui/src/panel.component.ts
@@ -9,6 +9,7 @@ import { AngularComponentFactory } from "./component-factory";
 export class PanelComponent extends BaseAngular<PanelModel> implements AfterViewInit {
   @Input() model!: PanelModel;
   @ViewChild("panelContainer", { static: false, read: ElementRef }) panelContainerRef!: ElementRef<HTMLDivElement>;
+  private readonly panelPaddingHorizontal = "var(--sd-base-padding, var(--sjs2-spacing-x500))";
   protected getModel(): PanelModel {
     return this.model;
   }
@@ -23,5 +24,11 @@ export class PanelComponent extends BaseAngular<PanelModel> implements AfterView
   public get canRender() {
     return this.model && this.model.survey && this.model.getIsContentVisible();
   }
+  public get panelContentStyle(): Record<string, string> {
+    const hasInnerPadding = !!this.model?.innerPaddingLeft;
+    return hasInnerPadding ? {
+      "padding-inline-start": `calc(${this.panelPaddingHorizontal} + ${this.model.innerPaddingLeft})`,
+    } : {};
+  }
 }
 AngularComponentFactory.Instance.registerComponent("panel", PanelComponent);
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/question.component.html b/packages/survey-angular-ui/src/question.component.html
index c2c2b0453a..ae8387f87b 100644
--- a/packages/survey-angular-ui/src/question.component.html
+++ b/packages/survey-angular-ui/src/question.component.html
@@ -9,32 +9,37 @@
       [model]="model.singleInputActions"
       [css]="model.cssClasses"
     ></sv-breadcrumbs>
-    <div *ngIf="model.showErrorsAboveQuestion && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
-    <div [element]="model" *ngIf="model.hasTitleOnLeftTop" sv-ng-element-header></div>
-    <sv-single-input-summary
-      *ngIf="!!model.singleInputSummary"
-      [model]="model.singleInputSummary"
-      [css]="model.cssClasses"
-    ></sv-single-input-summary>
-    <sv-ng-element
-      *ngIf="!model.singleInputSummary && !!singleQuestion"
-      [model]="singleQuestion"
-    ></sv-ng-element>
-    <ng-template
-      *ngIf="!model.singleInputSummary && !singleQuestion"
-      [component]="{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData() }">
-      <div [class]="model.cssContent" role="presentation" [visible]="model.renderedIsExpanded" [attr.aria-hidden]="model.contentAriaHidden" [attr.data-sv-drop-target-matrix-row]="model.dragDropMatrixAttribute" [attr.data-sv-drop-target-matrix]="model.dragDropMatrixAttribute">
+    <div [class]="model.getQuestionContainerCss()">
+      <div *ngIf="model.showErrorsAboveQuestion && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
+      <div [class]="model.getHeaderAndContentContainerCss()">
+        <div [element]="model" *ngIf="model.hasTitleOnLeftTop" sv-ng-element-header></div>
+        <hr *ngIf="model.hasTitleOnLeftTop && model.isComplexQuestion" />
+        <sv-single-input-summary
+          *ngIf="!!model.singleInputSummary"
+          [model]="model.singleInputSummary"
+          [css]="model.cssClasses"
+        ></sv-single-input-summary>
+        <sv-ng-element
+          *ngIf="!model.singleInputSummary && !!singleQuestion"
+          [model]="singleQuestion"
+        ></sv-ng-element>
         <ng-template
-          [component]="{ name: getComponentName(), data: { model: model }, default: 'skeleton-question' }"></ng-template>
-        <div *ngIf="model.hasComment" [class]="model.getCommentAreaCss(false)">
-          <div [model]="model.locCommentText" sv-ng-string></div>
-          <sv-ng-comment [question]="model"></sv-ng-comment>
-        </div>
-        <div *ngIf="model.hasDescriptionUnderInput" [class]="model.cssDescription" [attr.id]="model.ariaDescriptionId"
-          [model]="model.locDescription" sv-ng-string></div>
+          *ngIf="!model.singleInputSummary && !singleQuestion"
+          [component]="{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData() }">
+          <div [class]="model.cssContent" role="presentation" [visible]="model.renderedIsExpanded" [attr.aria-hidden]="model.contentAriaHidden" [attr.data-sv-drop-target-matrix-row]="model.dragDropMatrixAttribute" [attr.data-sv-drop-target-matrix]="model.dragDropMatrixAttribute">
+            <ng-template
+              [component]="{ name: getComponentName(), data: { model: model }, default: 'skeleton-question' }"></ng-template>
+            <div *ngIf="model.hasComment" [class]="model.getCommentAreaCss(false)">
+              <div [model]="model.locCommentText" sv-ng-string></div>
+              <sv-ng-comment [question]="model"></sv-ng-comment>
+            </div>
+            <div *ngIf="model.hasDescriptionUnderInput" [class]="model.cssDescription" [attr.id]="model.ariaDescriptionId"
+              [model]="model.locDescription" sv-ng-string></div>
+          </div>
+        </ng-template>
+        <div [element]="model" *ngIf="model.hasTitleOnBottom" sv-ng-element-header></div>
       </div>
-    </ng-template>
-    <div [element]="model" *ngIf="model.hasTitleOnBottom" sv-ng-element-header></div>
-    <div *ngIf="model.showErrorsBelowQuestion && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
+      <div *ngIf="model.showErrorsBelowQuestion && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
+    </div>
   </div>
 </ng-template>
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/questions/composite.component.ts b/packages/survey-angular-ui/src/questions/composite.component.ts
index ac66a3b778..1bbb2661f2 100644
--- a/packages/survey-angular-ui/src/questions/composite.component.ts
+++ b/packages/survey-angular-ui/src/questions/composite.component.ts
@@ -6,7 +6,8 @@ import { PanelModel, QuestionCompositeModel } from "survey-core";
 
 @Component({
   selector: "sv-ng-composite-question",
-  template: "<sv-ng-panel [model]='contentPanel'></sv-ng-panel>"
+  template: "<ng-template #template><sv-ng-panel [model]='contentPanel'></sv-ng-panel></ng-template>",
+  styles: [":host { display: none } "]
 })
 export class CompositeQuestionComponent extends QuestionAngular<QuestionCompositeModel> {
   get contentPanel(): PanelModel {
diff --git a/packages/survey-angular-ui/src/questions/paneldynamic.component.html b/packages/survey-angular-ui/src/questions/paneldynamic.component.html
index 5eedd5a77e..5ce14a41ab 100644
--- a/packages/survey-angular-ui/src/questions/paneldynamic.component.html
+++ b/packages/survey-angular-ui/src/questions/paneldynamic.component.html
@@ -1,30 +1,33 @@
-<div [class]="model.cssClasses.root" #contentElement>
-  <div *ngIf="model.hasTabbedMenu" [class]="model.getTabsContainerCss()">
-    <sv-action-bar [model]="model.tabbedMenu"></sv-action-bar>
-  </div>
-  <sv-ng-placeholder-paneldynamic [question]="model"></sv-ng-placeholder-paneldynamic>
-  <div [class]="model.cssClasses.progress" *ngIf="model.isProgressTopShowing && model.isRangeShowing">
-    <div [class]="model.cssClasses.progressBar" [style]="{ width: model.progress }"
-    role="progressbar" [attr.aria-label]="model.progressBarAriaLabel"
-    ></div>
-  </div>
-  <div [class]="model.cssClasses.panelsContainer">
-    <ng-container *ngFor="let panel of model.renderedPanels; index as index; trackBy: trackPanelBy">
-      <div [class]="model.getPanelWrapperCss(panel)">
-        <ng-template
-          [component]="{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }"></ng-template>
-        <ng-container *ngIf="model.canRenderRemovePanelOnRight(panel)">
+<ng-template #template>
+  <div [class]="model.cssClasses.root" #contentElement>
+    <div *ngIf="model.hasTabbedMenu" [class]="model.getTabsContainerCss()">
+      <sv-action-bar [model]="model.tabbedMenu"></sv-action-bar>
+    </div>
+    <sv-ng-placeholder-paneldynamic [question]="model"></sv-ng-placeholder-paneldynamic>
+    <div [class]="model.cssClasses.progress" *ngIf="model.isProgressTopShowing && model.isRangeShowing">
+      <div [class]="model.cssClasses.progressBar" [style]="{ width: model.progress }"
+      role="progressbar" [attr.aria-label]="model.progressBarAriaLabel"
+      ></div>
+    </div>
+    <div [class]="model.cssClasses.panelsContainer">
+      <ng-container *ngFor="let panel of model.renderedPanels; index as index; trackBy: trackPanelBy">
+        <div [class]="model.getPanelWrapperCss(panel)">
           <ng-template
-            [component]="{ name: 'sv-action', data: { model: model.getRemovePanelAction(panel)}}"></ng-template>
-        </ng-container>
-      </div>
-      <hr [class]="model.cssClasses.separator" *ngIf="model.showSeparator(index)" />
-    </ng-container>
+            [component]="{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }"></ng-template>
+          <ng-container *ngIf="model.canRenderRemovePanelOnRight(panel)">
+            <ng-template
+              [component]="{ name: 'sv-action', data: { model: model.getRemovePanelAction(panel)}}"></ng-template>
+          </ng-container>
+        </div>
+        <hr [class]="model.cssClasses.separator" *ngIf="model.showSeparator(index)" />
+      </ng-container>
+    </div>
+    <ng-container [ngTemplateOutlet]="progress" *ngIf="model.showNavigation"></ng-container>
   </div>
-  <ng-container [ngTemplateOutlet]="progress" *ngIf="model.showNavigation"></ng-container>
-</div>
+</ng-template>
+
 <ng-template #progress>
-  <div [class]="model.cssClasses.footer" *ngIf="!!model.cssClasses.footer">
+  <div [class]="model.cssClasses.footer" *ngIf="(model.isRangeShowing && model.isProgressBottomShowing) || model.showFooterToolbar">
     <hr [class]="model.cssClasses.separator" />
     <div [class]="model.cssClasses.progress" *ngIf="model.isRangeShowing && model.isProgressBottomShowing">
       <div [class]="model.cssClasses.progressBar" [style]="{ width: model.progress }" 
diff --git a/packages/survey-angular-ui/src/questions/paneldynamic.component.ts b/packages/survey-angular-ui/src/questions/paneldynamic.component.ts
index 476762d404..7186792a06 100644
--- a/packages/survey-angular-ui/src/questions/paneldynamic.component.ts
+++ b/packages/survey-angular-ui/src/questions/paneldynamic.component.ts
@@ -5,7 +5,8 @@ import { AngularComponentFactory } from "../component-factory";
 
 @Component({
   selector: "sv-ng-paneldynamic-question",
-  templateUrl: "./paneldynamic.component.html"
+  templateUrl: "./paneldynamic.component.html",
+  styleUrls: ["../hide-host.scss"]
 })
 export class PanelDynamicQuestionComponent extends QuestionAngular<QuestionPanelDynamicModel | any> implements OnInit {
   public trackPanelBy(_: number, panel: PanelModel) {
diff --git a/packages/survey-core/src/default-theme/base-theme.ts b/packages/survey-core/src/default-theme/base-theme.ts
index 6ebcaf4539..aac310ea57 100644
--- a/packages/survey-core/src/default-theme/base-theme.ts
+++ b/packages/survey-core/src/default-theme/base-theme.ts
@@ -260,88 +260,90 @@ export default {
     "--sjs2-layout-component-message-box-padding-vertical": "var(--sjs2-spacing-x100)",
     "--sjs2-layout-component-message-box-gap-vertical": "var(--sjs2-spacing-x100)",
     "--sjs2-layout-component-message-content-gap-horizontal": "var(--sjs2-spacing-x100)",
-    "--sjs2-layout-component-page-box-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-box-padding-top": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-box-padding-bottom": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-box-gap-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-content-area-padding-horizontal": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-page-content-area-padding-vertical": "var(--sjs2-spacing-x500)",
-    "--sjs2-layout-component-page-content-area-gap-horizontal": "var(--sjs2-spacing-x300)",
-    "--sjs2-layout-component-page-content-area-gap-vertical": "var(--sjs2-spacing-x300)",
-    "--sjs2-layout-component-page-header-padding-horizontal": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-page-header-padding-vertical": "var(--sjs2-spacing-large-vertical)",
-    "--sjs2-layout-component-page-header-gap-vertical": "var(--sjs2-spacing-x050)",
-    "--sjs2-layout-component-page-title-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-title-padding-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-description-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-description-padding-top": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-description-padding-bottom": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-footer-padding-horizontal": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-page-footer-padding-vertical": "var(--sjs2-spacing-large-vertical)",
-    "--sjs2-layout-component-page-footer-action-group-gap": "var(--sjs2-spacing-x150)",
-    "--sjs2-layout-component-panel-box-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-box-padding-top": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-box-padding-bottom": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-box-gap-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-content-area-padding-horizontal": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-content-area-padding-top": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-content-area-padding-bottom": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-content-area-gap-horizontal": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-content-area-gap-vertical": "var(--sjs2-spacing-medium-vertical)",
+    "--sjs2-layout-component-page-box-padding-horizontal": "var(--sjs2-spacing-large-horizontal)", // + should be --sjs2-spacing-x000
+    "--sjs2-layout-component-page-box-padding-top": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-page-box-padding-bottom": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-page-box-gap-vertical": "var(--sjs2-spacing-x300)", // + should be --sjs2-spacing-x000
+    "--sjs2-layout-component-page-content-area-padding-horizontal": "var(--sjs2-spacing-x000)", // + should be --sjs2-spacing-large-horizontal
+    "--sjs2-layout-component-page-content-area-padding-vertical": "var(--sjs2-spacing-x000)", // + should be --sjs2-spacing-large-vertical
+    "--sjs2-layout-component-page-content-area-gap-horizontal": "var(--sjs2-spacing-x200)", // + should be --sjs2-spacing-medium-horizontal
+    "--sjs2-layout-component-page-content-area-gap-vertical": "var(--sjs2-spacing-x200)", // + should be --sjs2-spacing-medium-vertical
+    "--sjs2-layout-component-page-header-padding-horizontal": "var(--sjs2-spacing-large-horizontal)", // not used
+    "--sjs2-layout-component-page-header-padding-vertical": "var(--sjs2-spacing-large-vertical)", // not used
+    "--sjs2-layout-component-page-header-gap-vertical": "var(--sjs2-spacing-x050)", // +
+    "--sjs2-layout-component-page-title-padding-horizontal": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-page-title-padding-vertical": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-page-description-padding-horizontal": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-page-description-padding-top": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-page-description-padding-bottom": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-page-footer-padding-horizontal": "var(--sjs2-spacing-large-horizontal)", // not used
+    "--sjs2-layout-component-page-footer-padding-vertical": "var(--sjs2-spacing-large-vertical)", // not used
+    "--sjs2-layout-component-page-footer-action-group-gap": "var(--sjs2-spacing-x150)", // not used
+    "--sjs2-layout-component-panel-box-padding-horizontal": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-box-padding-top": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-box-padding-bottom": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-box-gap-vertical": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-content-area-padding-horizontal": "var(--sjs2-spacing-large-horizontal)", // +
+    "--sjs2-layout-component-panel-content-area-padding-vertical": "var(--sjs2-spacing-large-vertical)",
+    "--sjs2-layout-component-panel-content-area-padding-top": "var(--sjs2-spacing-large-vertical)", // + should be --sjs2-spacing-medium-vertical
+    "--sjs2-layout-component-panel-content-area-padding-bottom": "var(--sjs2-spacing-large-vertical)", // + should be --sjs2-spacing-medium-vertical
+    "--sjs2-layout-component-panel-content-area-gap-horizontal": "var(--sjs2-spacing-large-horizontal)", // +
+    "--sjs2-layout-component-panel-content-area-gap-vertical": "var(--sjs2-spacing-x400)", // + should be --sjs2-spacing-medium-vertical
     "--sjs2-layout-component-panel-header-padding-left": "var(--sjs2-spacing-large-horizontal)",
     "--sjs2-layout-component-panel-header-padding-right": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-header-padding-top": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-header-padding-bottom": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-header-gap-vertical": "var(--sjs2-spacing-x050)",
+    "--sjs2-layout-component-panel-header-padding-top": "var(--sjs2-spacing-x400)", // + should be --sjs2-spacing-medium-vertical
+    "--sjs2-layout-component-panel-header-padding-bottom": "var(--sjs2-spacing-x400)", // + should be --sjs2-spacing-medium-vertical
+    "--sjs2-layout-component-panel-header-gap-vertical": "var(--sjs2-spacing-x050)", // +
     "--sjs2-layout-component-panel-header-gap-horizontal": "var(--sjs2-spacing-x150)",
-    "--sjs2-layout-component-panel-title-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-title-padding-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-description-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-description-padding-top": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-description-padding-bottom": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-footer-padding-left": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-footer-padding-right": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-footer-padding-top": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-footer-padding-bottom": "var(--sjs2-spacing-medium-vertical)",
+    "--sjs2-layout-component-panel-title-padding-horizontal": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-title-padding-vertical": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-description-padding-horizontal": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-description-padding-top": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-description-padding-bottom": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-footer-padding-left": "var(--sjs2-spacing-large-horizontal)", // +
+    "--sjs2-layout-component-panel-footer-padding-right": "var(--sjs2-spacing-large-horizontal)", // +
+    "--sjs2-layout-component-panel-footer-padding-top": "calc(0.5 * var(--sd-base-vertical-padding))", // + should be var(--sjs2-spacing-x000)
+    "--sjs2-layout-component-panel-footer-padding-bottom": "var(--sjs2-spacing-x200)", // + sholud be --sjs2-spacing-medium-vertical
     "--sjs2-layout-component-panel-footer-gap": "var(--sjs2-spacing-x150)",
-    "--sjs2-layout-component-panel-footer-action-group-gap": "var(--sjs2-spacing-x150)",
+    "--sjs2-layout-component-panel-footer-action-group-gap": "var(--sjs2-spacing-x150)", // +
     "--sjs2-layout-component-panel-header-action-group-gap": "var(--sjs2-spacing-x150)",
-    "--sjs2-layout-component-panel-simple-box-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-simple-box-padding-top": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-simple-box-padding-bottom": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-simple-box-gap-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-simple-content-area-padding-horizontal": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-simple-content-area-padding-top": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-simple-content-area-padding-bottom": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-simple-content-area-gap-horizontal": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-simple-content-area-gap-vertical": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-nested-footer-padding-left": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-nested-footer-padding-right": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-nested-footer-padding-top": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-nested-footer-padding-bottom": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-nested-footer-gap": "var(--sjs2-spacing-x150)",
-    "--sjs2-layout-component-panel-nested-box-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-nested-box-padding-top": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-nested-box-padding-bottom": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-nested-box-gap-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-nested-content-area-padding-horizontal": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-nested-content-area-padding-top": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-nested-content-area-padding-bottom": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-nested-content-area-gap-horizontal": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-nested-content-area-gap-vertical": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-nested-header-padding-left": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-nested-header-padding-right": "var(--sjs2-spacing-large-horizontal)",
+    "--sjs2-layout-component-panel-simple-box-padding-horizontal": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-simple-box-padding-top": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-simple-box-padding-bottom": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-simple-box-gap-vertical": "calc(0.5 * var(--sd-base-vertical-padding))", // + should be var(--sjs2-spacing-x000)
+    "--sjs2-layout-component-panel-simple-box-gap-horizontal": "var(--sjs2-spacing-x300)", // new
+    "--sjs2-layout-component-panel-simple-content-area-padding-horizontal": "var(--sd-base-padding)", // + should be --sjs2-spacing-large-horizontal
+    "--sjs2-layout-component-panel-simple-content-area-padding-top": "var(--sd-base-padding)", // + should be --sjs2-spacing-medium-vertical
+    "--sjs2-layout-component-panel-simple-content-area-padding-bottom": "var(--sd-base-padding)", // + should be --sjs2-spacing-medium-vertical
+    "--sjs2-layout-component-panel-simple-content-area-gap-horizontal": "var(--sjs2-spacing-x300)", // + should be --sjs2-spacing-large-horizontal
+    "--sjs2-layout-component-panel-simple-content-area-gap-vertical": "calc(0.5 * var(--sd-base-vertical-padding))", // + should be var(--sjs2-spacing-medium-vertical)
+    "--sjs2-layout-component-panel-nested-footer-padding-left": "var(--sjs2-layout-component-panel-footer-padding-left)",
+    "--sjs2-layout-component-panel-nested-footer-padding-right": "var(--sjs2-layout-component-panel-footer-padding-right)",
+    "--sjs2-layout-component-panel-nested-footer-padding-top": "var(--sjs2-layout-component-panel-footer-padding-top)",
+    "--sjs2-layout-component-panel-nested-footer-padding-bottom": "var(--sjs2-layout-component-panel-footer-padding-bottom)",
+    "--sjs2-layout-component-panel-nested-footer-gap": "var(--sjs2-layout-component-panel-footer-gap)",
+    "--sjs2-layout-component-panel-nested-box-padding-horizontal": "var(--sjs2-layout-component-panel-box-padding-horizontal)",
+    "--sjs2-layout-component-panel-nested-box-padding-top": "var(--sjs2-layout-component-panel-box-padding-top)",
+    "--sjs2-layout-component-panel-nested-box-padding-bottom": "var(--sjs2-layout-component-panel-box-padding-bottom)",
+    "--sjs2-layout-component-panel-nested-box-gap-vertical": "var(--sjs2-layout-component-panel-box-gap-vertical)",
+    "--sjs2-layout-component-panel-nested-content-area-padding-horizontal": "var(--sd-base-padding)",
+    "--sjs2-layout-component-panel-nested-content-area-padding-top": "var(--sjs2-layout-component-panel-content-area-padding-top)",
+    "--sjs2-layout-component-panel-nested-content-area-padding-bottom": "var(--sd-base-padding)",
+    "--sjs2-layout-component-panel-nested-content-area-gap-horizontal": "var(--sjs2-layout-component-panel-content-area-gap-horizontal)",
+    "--sjs2-layout-component-panel-nested-content-area-gap-vertical": "var(--sjs2-layout-component-panel-content-area-gap-vertical)",
+    "--sjs2-layout-component-panel-nested-header-padding-left": "var(--sjs2-layout-component-panel-header-padding-left)",
+    "--sjs2-layout-component-panel-nested-header-padding-right": "var(--sjs2-layout-component-panel-header-padding-right)",
     "--sjs2-layout-component-panel-nested-header-padding-top": "var(--sjs2-spacing-x200)",
     "--sjs2-layout-component-panel-nested-header-padding-bottom": "var(--sjs2-spacing-x200)",
-    "--sjs2-layout-component-panel-nested-header-gap-vertical": "var(--sjs2-spacing-x050)",
-    "--sjs2-layout-component-panel-nested-header-gap-horizontal": "var(--sjs2-spacing-x150)",
-    "--sjs2-layout-component-panel-nested-title-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-nested-title-padding-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-nested-description-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-nested-description-padding-top": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-nested-description-padding-bottom": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-nested-footer-action-group-gap": "var(--sjs2-spacing-x150)",
-    "--sjs2-layout-component-panel-nested-header-action-group-gap": "var(--sjs2-spacing-x150)",
+    "--sjs2-layout-component-panel-nested-header-gap-vertical": "var(--sjs2-layout-component-panel-header-gap-vertical)",
+    "--sjs2-layout-component-panel-nested-header-gap-horizontal": "var(--sjs2-layout-component-panel-header-gap-horizontal)",
+    "--sjs2-layout-component-panel-nested-title-padding-horizontal": "var(--sjs2-layout-component-panel-title-padding-horizontal)",
+    "--sjs2-layout-component-panel-nested-title-padding-vertical": "var(--sjs2-layout-component-panel-title-padding-vertical)",
+    "--sjs2-layout-component-panel-nested-description-padding-horizontal": "var(--sjs2-layout-component-panel-description-padding-horizontal)",
+    "--sjs2-layout-component-panel-nested-description-padding-top": "var(--sjs2-layout-component-panel-description-padding-top)",
+    "--sjs2-layout-component-panel-nested-description-padding-bottom": "var(--sjs2-layout-component-panel-description-padding-bottom)",
+    "--sjs2-layout-component-panel-nested-footer-action-group-gap": "var(--sjs2-layout-component-panel-footer-action-group-gap)",
+    "--sjs2-layout-component-panel-nested-header-action-group-gap": "var(--sjs2-layout-component-panel-header-action-group-gap)",
     "--sjs2-layout-component-panel-dynamic-box-padding-horizontal": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-panel-dynamic-box-padding-top": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-panel-dynamic-box-padding-bottom": "var(--sjs2-spacing-x000)",
@@ -353,8 +355,8 @@ export default {
     "--sjs2-layout-component-panel-dynamic-content-area-gap-vertical": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-panel-dynamic-header-padding-left": "var(--sjs2-spacing-large-horizontal)",
     "--sjs2-layout-component-panel-dynamic-header-padding-right": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-dynamic-header-padding-top": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-dynamic-header-padding-bottom": "var(--sjs2-spacing-medium-vertical)",
+    "--sjs2-layout-component-panel-dynamic-header-padding-top": "var(--sjs2-spacing-x400)", // + should be --sjs2-spacing-medium-vertical
+    "--sjs2-layout-component-panel-dynamic-header-padding-bottom": "var(--sjs2-spacing-x400)", // + should be --sjs2-spacing-medium-vertical
     "--sjs2-layout-component-panel-dynamic-header-gap-vertical": "var(--sjs2-spacing-x050)",
     "--sjs2-layout-component-panel-dynamic-header-gap-horizontal": "var(--sjs2-spacing-x150)",
     "--sjs2-layout-component-panel-dynamic-title-padding-horizontal": "var(--sjs2-spacing-x000)",
@@ -366,7 +368,7 @@ export default {
     "--sjs2-layout-component-panel-dynamic-footer-padding-right": "var(--sjs2-spacing-large-horizontal)",
     "--sjs2-layout-component-panel-dynamic-footer-padding-top": "var(--sjs2-spacing-medium-vertical)",
     "--sjs2-layout-component-panel-dynamic-footer-padding-bottom": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-dynamic-footer-gap": "var(--sjs2-spacing-x150)",
+    "--sjs2-layout-component-panel-dynamic-footer-gap": "var(--sjs2-spacing-x050)", // + should be --sjs2-spacing-x150
     "--sjs2-layout-component-panel-dynamic-footer-action-group-gap": "var(--sjs2-spacing-x150)",
     "--sjs2-layout-component-panel-dynamic-header-action-group-gap": "var(--sjs2-spacing-x150)",
     "--sjs2-layout-component-labeled-group-box-padding-vertical": "var(--sjs2-spacing-x150)",
@@ -377,25 +379,25 @@ export default {
     "--sjs2-layout-component-label-box-padding-vertical": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-label-box-gap-vertical": "var(--sjs2-spacing-x100)",
     "--sjs2-layout-component-label-content-gap-horizontal": "var(--sjs2-spacing-x050)",
-    "--sjs2-layout-component-question-box-gap-vertical": "var(--sjs2-spacing-x200)",
-    "--sjs2-layout-component-question-box-gap-horizontal": "var(--sjs2-spacing-x300)",
-    "--sjs2-layout-component-question-header-padding-left": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-question-header-padding-right": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-question-header-padding-top": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-question-header-padding-bottom": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-question-header-gap-horizontal": "var(--sjs2-spacing-x150)",
-    "--sjs2-layout-component-question-header-gap-vertical": "var(--sjs2-spacing-x050)",
-    "--sjs2-layout-component-question-header-side-padding-left": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-question-header-side-padding-right": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-question-header-side-padding-top": "var(--sjs2-spacing-x150)",
-    "--sjs2-layout-component-question-header-side-padding-bottom": "var(--sjs2-spacing-x000)",
+    "--sjs2-layout-component-question-box-gap-vertical": "var(--sjs2-spacing-x200)", // used panel-simple-box-gap instead
+    "--sjs2-layout-component-question-box-gap-horizontal": "var(--sjs2-spacing-x300)", // used panel-simple-box-gap instead
+    "--sjs2-layout-component-question-header-padding-left": "var(--sd-base-padding)", // + should be --sjs2-spacing-x000
+    "--sjs2-layout-component-question-header-padding-right": "var(--sd-base-padding)", // + should be --sjs2-spacing-x000
+    "--sjs2-layout-component-question-header-padding-top": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-question-header-padding-bottom": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-question-header-gap-horizontal": "var(--sjs2-spacing-x150)", // +
+    "--sjs2-layout-component-question-header-gap-vertical": "calc(0.25 * var(--sd-base-vertical-padding) - var(--sjs2-size-x050))", // + should be var(--sjs2-spacing-x050)
+    "--sjs2-layout-component-question-header-side-padding-left": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-question-header-side-padding-right": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-question-header-side-padding-top": "var(--sjs2-spacing-x150)", // + used as top margin for title left location
+    "--sjs2-layout-component-question-header-side-padding-bottom": "var(--sjs2-spacing-x000)", // +
     "--sjs2-layout-component-question-header-side-gap-horizontal": "var(--sjs2-spacing-x150)",
     "--sjs2-layout-component-question-header-side-gap-vertical": "var(--sjs2-spacing-x050)",
-    "--sjs2-layout-component-question-title-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-question-title-padding-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-question-description-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-question-description-padding-top": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-question-description-padding-bottom": "var(--sjs2-spacing-x000)",
+    "--sjs2-layout-component-question-title-padding-horizontal": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-question-title-padding-vertical": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-question-description-padding-horizontal": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-question-description-padding-top": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-question-description-padding-bottom": "var(--sjs2-spacing-x000)", // +
     "--sjs2-layout-component-question-header-action-group-gap": "var(--sjs2-spacing-x150)",
     "--sjs2-layout-component-caption-box-padding-left": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-caption-box-padding-right": "var(--sjs2-spacing-x050)",
diff --git a/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss b/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
index 4f08e4e606..dee400a721 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
@@ -1,7 +1,7 @@
 @use "../variables.scss" as *;
 
-.sd-element--expanded,
-.sd-element--collapsed {
+.sd-element--expanded > div > div,
+.sd-element--collapsed > div > div {
   &>.sd-element__header {
     cursor: pointer;
   }
@@ -9,16 +9,11 @@
 
 .sd-element--collapsed {
   &>.sd-element__header {
-    padding: var(--sjs2-spacing-x000) var(--sd-base-padding);
     box-sizing: border-box;
     background-color: $background;
-    margin-inline-start: calc(-1 * var(--sd-base-padding));
-    width: calc(100% + 2 * var(--sd-base-padding));
   }
 
   &.sd-element--with-frame {
-    padding-top: 0;
-    padding-bottom: 0;
 
     &>.sd-element__header {
       padding-top: var(--sjs2-spacing-x200);
@@ -39,4 +34,30 @@
       box-shadow: 0 var(--sjs2-spacing-negative-x200) 0 0 $background-dim-light, 0 var(--sjs2-spacing-x200) 0 $background-dim-light;
     }
   }
+
+  &.sd-element--nested > div > div {
+
+    &>.sd-element__header:hover,
+    &>.sd-element__header:focus-within {
+      background-color: $background-dim-light;
+      box-shadow: var(--sjs2-spacing-negative-x300) 0px 0px var(--sjs2-spacing-x200) var(--sjs2-color-bg-basic-secondary), var(--sjs2-spacing-x300) 0px 0px var(--sjs2-spacing-x200) var(--sjs2-color-bg-basic-secondary);
+    }
+  }
+}
+
+.sd-element--expandable > div > div {
+  &>.sd-element__header {
+    cursor: pointer;
+  }
+}
+
+.sd-element--with-frame.sd-element--collapsed > div {
+  &> .sd-question__header-and-content-container {
+    padding-top: var(--sjs2-spacing-x200);
+    padding-bottom: var(--sjs2-spacing-x200);
+    border-radius: var(--sjs2-radius-component-panel);
+    &:hover, &:focus-within {
+      background-color: $background-dim-light;
+    }
+  }
 }
\ No newline at end of file
diff --git a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
index 5e949da91d..1929f8ce8a 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
@@ -10,6 +10,17 @@
   margin-bottom: 0;
 }
 
+.sd-element__header ~ hr {
+  margin: 0 calc(-1 * var(--sd-base-padding));
+  margin-top: calc(0.5 * var(--sd-base-vertical-padding));
+  width: calc(100% + 2 * var(--sd-base-padding));
+  border: none;
+  height: 1px;
+  background-color: $border-light;
+  position: sticky;
+  left: calc(-1 * var(--sd-base-padding));
+}
+
 .sd-element--complex > .sd-element__header {
   &:after {
     content: " ";
@@ -21,16 +32,6 @@
   }
 }
 
-.sd-element--complex.sd-element--with-frame > .sd-element__header {
-  padding-top: var(--sd-base-vertical-padding);
-  padding-bottom: var(--sd-base-vertical-padding);
-}
-
-.sd-element--collapsed.sd-element--complex > .sd-element__header {
-  padding-top: var(--sjs2-spacing-x200);
-  padding-bottom: var(--sjs2-spacing-x200);
-}
-
 .sd-element--nested.sd-element--complex {
   & > .sd-element__header--location-top {
     &:after {
@@ -39,28 +40,36 @@
   }
 }
 
+.sd-element--nested.sd-element--complex>div>div {
+  & > .sd-element__header--location-top {
+    &~hr {
+      display: block;
+      margin: 0;
+      width: 100%;
+    }
+  }
+}
+
 .sd-element--nested-with-borders {
   border: 1px solid $border-light;
   border-radius: var(--sjs2-radius-component-panel-nested);
   box-sizing: border-box;
-  padding-left: var(--sd-base-padding);
-  padding-right: var(--sd-base-padding);
 
   & > .sd-element__header--location-top {
     padding-top: calc(0.5 * var(--sd-base-vertical-padding));
     padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
   }
-
-  & > .sd-element__erbox {
-    margin-left: calc(-1 * var(--sd-base-padding));
-    margin-right: calc(-1 * var(--sd-base-padding));
-    width: calc(100% + 2 * var(--sd-base-padding));
+  & >div>div> .sd-element__header--location-top {
+    padding-top: calc(0.5 * var(--sd-base-vertical-padding));
+    padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
   }
 
-  & > .sd-question__erbox--below-question {
-    bottom: 0;
-    margin-top: 0;
-  }
+  // Commented out: question erbox is no longer a direct child of the question root
+  // (it is nested inside .sd-question__container)
+  // & > .sd-question__erbox--below-question {
+  //   bottom: 0;
+  //   margin-top: 0;
+  // }
 
   &.sd-element--collapsed {
     & > .sd-element__header--location-top {
@@ -90,20 +99,40 @@
 }
 
 .sd-question--empty.sd-question--complex {
-  & > .sd-question__content {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
 
-  & > .sd-question__content:first-of-type {
-    padding-top: var(--sd-base-padding);
+  &>.sd-question__container {
+      row-gap: 0;
+      &>.sd-question__header-and-content-container {
+          row-gap: 0;
+          padding-bottom: var(--sd-base-padding);
+          &>.sd-element__header {
+              padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+              &~hr {
+                  display: none;
+              }
+          }
+      }
   }
+}
 
-  & > .sd-question__header--location-top {
-    padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
-
-    &:after {
-      display: none;
-    }
+// TODO: remove this after the next release, it is a temporary fix to keep screenshot
+.sd-element--complex.sd-element--with-frame.sd-question--left {
+  &>.sd-question__container {
+      &>.sd-question__header-and-content-container {
+          &>.sd-element__header {
+              margin-top: calc(var(--sjs2-size-x300) + var(--sjs2-size-x050));
+              &~hr {
+                  display: none;
+              }
+              &:after {
+                  content: " ";
+                  display: block;
+                  height: 1px;
+                  position: relative;
+                  background: var(--sjs2-color-border-basic-secondary);
+                  bottom: var(--sjs2-size-x050);
+              }              
+          }
+      }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/survey-core/src/default-theme/blocks/sd-dropdown.scss b/packages/survey-core/src/default-theme/blocks/sd-dropdown.scss
index 96cc4827a0..4feb58bf99 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-dropdown.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-dropdown.scss
@@ -6,13 +6,13 @@
   position: relative;
 }
 .sd-dropdown--select {
+  justify-content: end;
   &:before {
     pointer-events: none;
     content: "";
     @include sjs2--typography--component--input--content;
     min-height: calc(1lh + var(--sjs2-layout-component-input-medium-content-padding-vertical) * 2);
   }
-  justify-content: end;
   select.sd-dropdown__input {
     position: absolute;
     padding: 
diff --git a/packages/survey-core/src/default-theme/blocks/sd-element.scss b/packages/survey-core/src/default-theme/blocks/sd-element.scss
index 0f65ab4661..4ff31a67c7 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-element.scss
@@ -2,11 +2,6 @@
 @use "../mixins.scss" as mixins;
 @use "../typography-mixins.scss" as *;
 
-.sd-element {
-  padding-left: var(--sv-element-add-padding-left, 0px);
-  padding-right: var(--sv-element-add-padding-right, 0px);
-}
-
 .sd-element__title {
   outline: none;
 }
@@ -136,10 +131,6 @@
 .sd-element--with-frame {
   border-radius: var(--sjs2-radius-component-panel);
   box-sizing: border-box;
-  padding-top: var(--sd-base-padding);
-  padding-left: calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px));
-  padding-right: calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px));
-  padding-bottom: var(--sd-base-padding);
   background: var(--sjs2-color-component-panel-default-bg);
   box-shadow: $shadow-small;
 }
diff --git a/packages/survey-core/src/default-theme/blocks/sd-list.scss b/packages/survey-core/src/default-theme/blocks/sd-list.scss
index 48f31891db..248fe9dae2 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-list.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-list.scss
@@ -2,12 +2,9 @@
 @use "../typography-mixins.scss" as *;
 
 .sd-list {
-  // padding-right: var(--sjs2-spacing-x050);
-  // padding-left: var(--sjs2-spacing-x050);
 }
 
 .sd-list__item {
-  // padding: 0;
 }
 
 .sd-list__item-body {
diff --git a/packages/survey-core/src/default-theme/blocks/sd-matrixdynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-matrixdynamic.scss
index 8750800248..992f31696c 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-matrixdynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-matrixdynamic.scss
@@ -26,6 +26,11 @@
   }
 }
 
+// TODO: Remove after new design system is implemented
+.sd-question--mobile .sd-matrixdynamic__footer:first-child {
+  margin-top: var(--sjs2-spacing-negative-x100);
+}
+
 .sd-matrixdynamic__footer {
   padding-top: var(--sjs2-spacing-x200);
 }
diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index 7cde022236..39f1ecfa24 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -3,50 +3,84 @@
 
 .sd-page {
   position: relative;
+  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 0 var(--sjs2-spacing-x500);
-  width: 100%;
   box-sizing: border-box;
+  padding-top: var(--sjs2-layout-component-page-box-padding-top);
+  padding-bottom: var(--sjs2-layout-component-page-box-padding-bottom);
+  padding-left: var(--sjs2-layout-component-page-box-padding-horizontal);
+  padding-right: var(--sjs2-layout-component-page-box-padding-horizontal);
   border-radius: var(--sjs2-radius-component-page);
+  row-gap: var(--sjs2-layout-component-page-box-gap-vertical);
+  column-gap: var(--sjs2-layout-component-page-box-gap-horizontal);
 }
 
-.sd-root-modern--mobile .sd-page {
-  padding: 0;
+.sd-page__header {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: var(--sjs2-layout-component-page-header-gap-vertical);
+  margin: 0 0 var(--sjs2-layout-component-page-header-gap-vertical) 0;
 }
 
-.sd-page .sd-page__title {
+.sd-page__title {
   @include sjs2--typography--component--page--title;
   position: static;
-  margin: 0 0 var(--sjs2-spacing-x050) 0px;
+  padding-inline-start:  var(--sjs2-layout-component-page-title-padding-horizontal);
+  padding-inline-end: var(--sjs2-layout-component-page-title-padding-horizontal);
+  padding-top: var(--sjs2-layout-component-page-title-padding-vertical);
+  padding-bottom: var(--sjs2-layout-component-page-title-padding-vertical);
 }
 
-.sd-page .sd-page__description {
+.sd-page__description {
   @include sjs2--typography--component--page--description;
   position: static;
-  margin: 0 0 var(--sjs2-spacing-x050) 0;
+  padding-inline-start:  var(--sjs2-layout-component-page-description-padding-horizontal);
+  padding-inline-end: var(--sjs2-layout-component-page-description-padding-horizontal);
+  padding-top: var(--sjs2-layout-component-page-description-padding-top);
+  padding-bottom: var(--sjs2-layout-component-page-description-padding-bottom);
 }
 
-
-.sd-page__errbox {
-  padding: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100)) var(--sd-base-padding);
+.sd-page__content {
+  display: flex;
+  flex-direction: column;
+  padding: var(--sjs2-layout-component-page-content-area-padding-vertical) var(--sjs2-layout-component-page-content-area-padding-horizontal);
+  row-gap: var(--sjs2-layout-component-page-content-area-gap-vertical);
+  column-gap: var(--sjs2-layout-component-page-content-area-gap-horizontal);
+  width: 100%;
+  box-sizing: border-box;
 }
 
-.sd-page__title,
-.sd-page__description {
-  &~.sd-page__errbox {
-    margin-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
-    margin-bottom: var(--sjs2-spacing-negative-x100);
+// TODO: Remove after new tokens are released, it is a temporary fix to keep screenshot
+.sd-root-modern--mobile {
+  .sd-page {
+    padding: 0;
   }
 }
 
+.sd-page__errbox {
+  // TODO: Remove after new tokens are released, it is a temporary fix to keep screenshot
+  padding: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100)) var(--sd-base-padding);
+}
+
 .sd-root--compact {
 
-  .sd-page__title,
-  .sd-page__description {
-    &~.sd-page__errbox {
-      margin-bottom: 0;
+  // TODO: Remove after new tokens are released, it is a temporary fix to keep screenshot
+  .sd-page__header ~ .sd-page__content {
+    .sd-page__errbox {
+      margin-top: var(--sjs2-spacing-negative-x100);
     }
   }
-}
\ No newline at end of file
+
+  .sd-page {
+    // TODO: Discuss with design team. To remove in favour of compact theme?
+    row-gap: var(--sd-base-vertical-padding);
+  }
+
+  .sd-page__content {
+    // TODO: Discuss with design team. To remove in favour of compact theme?
+    row-gap: var(--sd-base-vertical-padding);
+  }
+}
diff --git a/packages/survey-core/src/default-theme/blocks/sd-panel-nested.scss b/packages/survey-core/src/default-theme/blocks/sd-panel-nested.scss
new file mode 100644
index 0000000000..52e932808e
--- /dev/null
+++ b/packages/survey-core/src/default-theme/blocks/sd-panel-nested.scss
@@ -0,0 +1,68 @@
+// TODO: Discuss whether we need this file: only 2 CSS variables are differ from ordinary panel
+.sd-panel.sd-element--nested {
+  padding-inline-start: var(--sjs2-layout-component-panel-nested-box-padding-horizontal);
+  padding-inline-end: var(--sjs2-layout-component-panel-nested-box-padding-horizontal);
+  padding-top: var(--sjs2-layout-component-panel-nested-box-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-nested-box-padding-bottom);
+  gap: var(--sjs2-layout-component-panel-nested-box-gap-vertical);
+
+  & > .sd-panel__header {
+    padding-top: var(--sjs2-layout-component-panel-nested-header-padding-top);
+    padding-bottom: var(--sjs2-layout-component-panel-nested-header-padding-bottom);
+    padding-inline-start: var(--sjs2-layout-component-panel-nested-header-padding-left);
+    padding-inline-end: var(--sjs2-layout-component-panel-nested-header-padding-right);
+  }
+
+  .sd-panel__title {
+    padding: var(--sjs2-layout-component-panel-nested-title-padding-vertical)
+      var(--sjs2-layout-component-panel-nested-title-padding-horizontal);
+  }
+
+  .sd-panel__description {
+    padding-top: var(--sjs2-layout-component-panel-nested-description-padding-top);
+    padding-bottom: var(--sjs2-layout-component-panel-nested-description-padding-bottom);
+    padding-inline: var(--sjs2-layout-component-panel-nested-description-padding-horizontal);
+  }
+
+  .sd-panel__title ~ .sd-panel__description {
+    margin-top: var(--sjs2-layout-component-panel-nested-header-gap-vertical);
+  }
+
+  & > .sd-panel__content {
+    padding-inline-start: var(--sjs2-layout-component-panel-nested-content-area-padding-horizontal);
+    padding-inline-end: var(--sjs2-layout-component-panel-nested-content-area-padding-horizontal);
+    padding-top: var(--sjs2-layout-component-panel-nested-content-area-padding-top);
+    padding-bottom: var(--sjs2-layout-component-panel-nested-content-area-padding-bottom);
+    --animation-padding-top: var(--sjs2-layout-component-panel-nested-content-area-padding-bottom);
+    row-gap: var(--sjs2-layout-component-panel-nested-content-area-gap-vertical);
+    column-gap: var(--sjs2-layout-component-panel-nested-content-area-gap-horizontal);
+  }
+
+  & > .sd-panel__footer {
+    padding-top: var(--sjs2-layout-component-panel-nested-footer-padding-top);
+    padding-bottom: var(--sjs2-layout-component-panel-nested-footer-padding-bottom);
+    padding-inline-start: calc(var(--sjs2-layout-component-panel-nested-footer-padding-left) - 1.75 * var(--sjs2-spacing-x100));
+    padding-inline-end: var(--sjs2-layout-component-panel-nested-footer-padding-right);
+    --sd-action-bar-gap: var(--sjs2-layout-component-panel-nested-footer-action-group-gap);
+  }
+}
+
+// Restore the ".sd-panel--as-page .sd-panel__footer" override (sd-panel.scss) that the
+// higher-specificity nested footer rule above would otherwise beat.
+.sd-panel--as-page .sd-panel.sd-element--nested > .sd-panel__footer {
+  padding: var(--sjs2-spacing-x400) 0 0;
+  margin: 0;
+  border: none;
+  width: initial;
+}
+
+.sd-root-modern--mobile {
+  .sd-element--nested > .sd-panel__header {
+    padding: var(--sjs2-spacing-x100) var(--sjs2-spacing-x300);
+  }
+  // Restore the mobile gap (sd-panel.scss mobile ".sd-panel__content" rule) that the
+  // higher-specificity nested content rule above would otherwise beat.
+  .sd-panel.sd-element--nested > .sd-panel__content {
+    gap: var(--sjs2-spacing-x200);
+  }
+}
diff --git a/packages/survey-core/src/default-theme/blocks/sd-panel.scss b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
index ff92f03227..81e605948d 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-panel.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
@@ -2,13 +2,60 @@
 @use "../typography-mixins.scss" as *;
 
 .sd-panel {
+  display: flex;
+  flex-direction: column;
   position: relative;
+  padding-inline-start:  var(--sjs2-layout-component-panel-box-padding-horizontal);
+  padding-inline-end: var(--sjs2-layout-component-panel-box-padding-horizontal);
+  padding-top: var(--sjs2-layout-component-panel-box-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-box-padding-bottom);
+  gap: var(--sjs2-layout-component-panel-box-gap-vertical);
+}
+
+.sd-panel__header {
+  padding-top: var(--sjs2-layout-component-panel-header-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-header-padding-bottom);
+  padding-inline-start: var(--sjs2-layout-component-panel-header-padding-left);
+  padding-inline-end: var(--sjs2-layout-component-panel-header-padding-right);
+}
+
+.sd-panel__title {
+  padding: var(--sjs2-layout-component-panel-title-padding-vertical) var(--sjs2-layout-component-panel-title-padding-horizontal);
+}
+
+.sd-panel__description {
+  padding-inline-start:  var(--sjs2-layout-component-panel-description-padding-horizontal);
+  padding-inline-end: var(--sjs2-layout-component-panel-description-padding-horizontal);
+  padding-top: var(--sjs2-layout-component-panel-description-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-description-padding-bottom);
+}
+
+.sd-panel__content {
+  padding-inline-start:  var(--sjs2-layout-component-panel-content-area-padding-horizontal);
+  padding-inline-end: var(--sjs2-layout-component-panel-content-area-padding-horizontal);
+  padding-top: var(--sjs2-layout-component-panel-content-area-padding-top);
+  --animation-padding-top: var(--sjs2-layout-component-panel-content-area-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-content-area-padding-bottom);
+  row-gap: var(--sjs2-layout-component-panel-content-area-gap-vertical);
+  column-gap: var(--sjs2-layout-component-panel-content-area-gap-horizontal);
+  display: flex;
+  flex-direction: column;
+}
+
+.sd-root-modern--mobile {
+ .sd-panel__header {
+    padding: var(--sjs2-spacing-x200) var(--sjs2-spacing-x300);
+  }
+ .sd-panel__content {
+    padding: var(--sjs2-spacing-x300);
+    gap: var(--sjs2-spacing-x200);
+  }
 }
 
 .sd-panel.sd-panel--as-page {
   & > .sd-panel__header.sd-panel__header {
-    padding-top: 0;
-    padding-bottom: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
+    padding: 0;
+    padding-bottom: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x150));
 
     &:after {
       content: none;
@@ -17,7 +64,6 @@
     .sd-panel__title {
       @include sjs2--typography--component--page--title;
       position: static;
-      margin: 0 0 var(--sjs2-spacing-x050) 0px;
 
       span {
         font-family: inherit;
@@ -38,7 +84,6 @@
     .sd-panel__description {
       @include sjs2--typography--component--page--description;
       position: static;
-      margin: 0 0 var(--sjs2-spacing-x050) 0;
     }
 
     .sd-panel__required-text {
@@ -47,20 +92,25 @@
   }
 
   & > .sd-panel__errbox {
-    margin: 0 0 var(--sjs2-spacing-x200) 0;
+    margin: 0 0 var(--sjs2-layout-component-page-content-area-gap-vertical) 0;
     padding: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100)) var(--sd-base-padding);
   }
 
   & > .sd-panel__content {
-    padding-top: 0;
+    padding: 0;
+    row-gap: var(--sjs2-layout-component-page-content-area-gap-vertical);
   }
 }
 
 .sd-root--compact {
+
   .sd-panel--as-page {
     & > .sd-panel__errbox {
       margin: 0 0 var(--sd-base-vertical-padding) 0;
     }
+    .sd-panel__content {
+      row-gap: var(--sd-base-vertical-padding);
+    }
   }
 }
 
@@ -88,8 +138,8 @@
   padding-inline: var(--sjs2-layout-component-panel-description-padding-horizontal);
 }
 
-.sd-panel__header .sd-panel__description {
-  margin-top: calc(0.25 * var(--sd-base-vertical-padding) - var(--sjs2-size-x050));
+.sd-panel__title ~ .sd-panel__description {
+  margin-top: var(--sjs2-layout-component-panel-header-gap-vertical);
 }
 
 .sd-panel > .sd-panel__header:after {
@@ -98,32 +148,18 @@
 
 .sd-panel__footer {
   box-sizing: border-box;
-  padding-left: calc(var(--sd-base-padding) + var(--sjs2-spacing-negative-x150) + var(--sjs2-spacing-negative-x025));
-  margin-left: calc(-1 * var(--sd-base-padding));
-  width: calc(100% + 2 * var(--sd-base-padding));
-  margin-bottom: calc(-1 * var(--sd-base-padding) + 0.5 * var(--sd-base-vertical-padding));
-  margin-top: calc(0.5 * var(--sd-base-vertical-padding));
   border-top: 1px solid $border-light;
-  padding-top: calc(0.5 * var(--sd-base-vertical-padding));
+  margin-top: calc(-1 * var(--sjs2-spacing-x300));
+  padding-top: var(--sjs2-layout-component-panel-footer-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-footer-padding-bottom);
+  padding-inline-start: calc(var(--sjs2-layout-component-panel-footer-padding-left) - 1.75 * var(--sjs2-spacing-x100));
+  padding-inline-end: var(--sjs2-layout-component-panel-footer-padding-right);
   --sd-action-bar-gap: var(--sjs2-layout-component-panel-footer-action-group-gap);
 }
+
 .sd-panel--as-page .sd-panel__footer {
   padding: var(--sjs2-spacing-x400) 0 0;
   margin: 0;
   border: none;
   width: initial;
 }
-.sd-panel__content {
-  padding-top: var(--sd-base-padding);
-}
-
-.sd-panel.sd-element--nested {
-  & > .sd-panel__content {
-    padding-bottom: var(--sd-base-padding);
-    --animation-padding-top: var(--sd-base-padding);
-  }
-}
-
-.sd-panel__content {
-  --animation-padding-top: var(--sd-base-padding);
-}
diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 9835f1f8c2..2268b6919b 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -1,13 +1,22 @@
 @use "../variables.scss" as *;
 
 .sd-paneldynamic {
+    padding-top: var(--sjs2-layout-component-panel-dynamic-box-padding-top);
+    padding-bottom: var(--sjs2-layout-component-panel-dynamic-box-padding-bottom);
+    padding-inline-start: var(--sjs2-layout-component-panel-dynamic-box-padding-horizontal);
+    padding-inline-end: var(--sjs2-layout-component-panel-dynamic-box-padding-horizontal);
+    gap: var(--sjs2-layout-component-panel-dynamic-box-gap-vertical);
+
     .sd-progress {
         position: absolute;
         left: 0;
         right: 0;
         height: 2px;
         z-index: 2;
-        transform: translateY(-1px);
+    }
+
+    .sd-progress ~ .sd-paneldynamic__panels-container {
+        padding-top: 1px;
     }
 
     & > .sd-panel {
@@ -15,33 +24,128 @@
         padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
     }
 
-    & .sd-paneldynamic__panel-wrapper > .sd-panel > .sd-panel__header {
-        padding-top: var(--sd-base-vertical-padding);
-        padding-bottom: 0;
+    & .sd-paneldynamic__panel-wrapper > .sd-panel {
+        &> .sd-panel__header {
+            padding-top: var(--sd-base-vertical-padding);
+            padding-bottom: 0;
 
-        &:after {
-            display: none;
+            &:after {
+                display: none;
+            }
+
+            & > .sd-panel__title {
+                color: $foreground-light;
+            }
         }
+    }
+}
+
+.sd-paneldynamic ~ .sd-question__comment-area {
+  padding: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x500)) var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500));
+  padding-top: 0;
+}
+.sd-root-modern--mobile {
+  .sd-paneldynamic ~ .sd-question__comment-area {
+    padding: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x300)) var(--sjs2-spacing-x300);
+    padding-top: 0;
+  }
+}
 
-        & > .sd-panel__title {
-            color: $foreground-light;
+// Commented out: .sd-paneldynamic__footer / .sd-paneldynamic__panel-footer are never
+// direct children of the question root (footer lives inside .sd-paneldynamic,
+// panel footer inside .sd-panel)
+// .sd-question:not(.sd-element--with-frame) {
+//     &>.sd-paneldynamic__footer {
+//         padding: 0;
+//     }
+
+//     &>.sd-paneldynamic__panel-footer {
+//         padding: 0;
+//     }
+// }
+
+.sd-question--paneldynamic {
+    &>.sd-question__container {
+        &>.sd-question__header-and-content-container {
+            padding: 0;
+            gap: 0;
         }
     }
 }
 
+.sd-paneldynamic__header {
+  padding-top: var(--sjs2-layout-component-panel-dynamic-header-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-dynamic-header-padding-bottom);
+  padding-inline-start: var(--sjs2-layout-component-panel-dynamic-header-padding-left);
+  padding-inline-end: var(--sjs2-layout-component-panel-dynamic-header-padding-right);
+  gap: var(--sjs2-layout-component-panel-dynamic-header-gap-vertical);
+}
+
+.sd-paneldynamic__header .sd-question__title {
+  padding: var(--sjs2-layout-component-panel-dynamic-title-padding-vertical) var(--sjs2-layout-component-panel-dynamic-title-padding-horizontal);
+}
+
+.sd-paneldynamic__header .sd-question__description {
+  padding-inline: var(--sjs2-layout-component-panel-dynamic-description-padding-horizontal);
+  padding-top: var(--sjs2-layout-component-panel-dynamic-description-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-dynamic-description-padding-bottom);
+}
+
+.sd-paneldynamic__header ~ hr {
+    margin: 0;
+    width: 100%;
+}
+.sd-paneldynamic__header-tab ~ hr {
+    display: none;
+}
+.sd-paneldynamic__navigation--top {
+    &>.sd-question__container {
+        &>.sd-question__header-and-content-container {
+            & > hr {
+                display: none;
+            }
+        }
+    }
+}
+
+.sd-paneldynamic__footer {
+    clear: both;
+    padding-top: var(--sjs2-layout-component-panel-dynamic-footer-padding-top);
+    padding-bottom: var(--sjs2-layout-component-panel-dynamic-footer-padding-bottom);
+    padding-inline-start: var(--sjs2-layout-component-panel-dynamic-footer-padding-left);
+    padding-inline-end: var(--sjs2-layout-component-panel-dynamic-footer-padding-right);
+    gap: var(--sjs2-layout-component-panel-dynamic-footer-gap);
+    position: relative;
+
+    .sd-progress {
+        top: -1px;
+    }
+
+    .sd-paneldynamic__progress-text,
+    .sd-paneldynamic__progress--bottom {
+        display: initial;
+    }
+}
+
+.sd-root-modern--mobile {
+    .sd-paneldynamic__header {
+        padding: var(--sjs2-spacing-x200) var(--sjs2-spacing-x300);
+    }
+    .sd-paneldynamic__footer {
+        padding: var(--sjs2-spacing-x100) var(--sjs2-spacing-x300);
+    }
+    .sd-paneldynamic__panel-footer {
+        padding: var(--sjs2-spacing-x200) var(--sjs2-spacing-x300);
+        margin-top: calc(var(--sjs2-spacing-negative-x400));
+    }
+}
+
 .sd-question--readonly,
 .sd-question--preview {
     .sd-paneldynamic .sd-question__placeholder {
         color: $foreground;
     }
 }
-.sd-paneldynamic__separator {
-    display: none;
-}
-.sd-paneldynamic__panel-wrapper {
-    box-sizing: border-box;
-    padding-bottom: calc(1 * var(--sd-base-padding));
-}
 
 .sd-paneldynamic__panel-wrapper:after {
     display: table;
@@ -49,11 +153,15 @@
     content: " ";
 }
 
+.sd-paneldynamic__separator {
+    display: none;
+}
 .sd-paneldynamic__footer .sd-paneldynamic__separator,
 .sd-paneldynamic__panel-wrapper--list ~ .sd-paneldynamic__panel-wrapper--list:before {
     content: " ";
     display: block;
     position: absolute;
+    top: 0;
     left: 0;
     right: 0;
     margin: 0;
@@ -79,19 +187,9 @@
     }
 }
 
-.sd-paneldynamic__footer {
-    clear: both;
-
-    .sd-paneldynamic__progress-text,
-    .sd-paneldynamic__progress--bottom {
-        display: initial;
-    }
-}
-
 .sd-paneldynamic__buttons-container {
     display: flex;
     align-items: center;
-    padding: calc(var(--sd-base-vertical-padding) - var(--sjs2-spacing-x100)) 0;
 }
 
 .sd-paneldynamic__progress-text {
@@ -108,20 +206,24 @@
     }
 }
 
-.sd-question--empty.sd-question--paneldynamic {
-    & > .sd-question__content {
-        padding-bottom: var(--sd-base-padding);
-        --animation-padding-bottom: var(--sd-base-padding);
-    }
-}
-
-.sd-question--paneldynamic:not(.sd-question--empty) {
-    & > .sd-question__content {
-        & > .sd-question__comment-area {
-            padding-bottom: var(--sd-base-padding);
-        }
-    }
-}
+// Commented out: .sd-question__content is no longer a direct child of the question root
+// (it is nested inside .sd-question__container > .sd-question__header-and-content-container)
+// .sd-question--empty.sd-question--paneldynamic {
+//     & > .sd-question__content {
+//         padding-bottom: var(--sd-base-padding);
+//         --animation-padding-bottom: var(--sd-base-padding);
+//     }
+// }
+
+// .sd-question--paneldynamic:not(.sd-question--empty) {
+//     & > .sd-question__content {
+//         padding: 0;
+//         --animation-padding-bottom: 0;
+//         & > .sd-question__comment-area {
+//             padding-bottom: var(--sd-base-padding);
+//         }
+//     }
+// }
 
 .sd-paneldynamic__buttons-container .sd-action-bar {
     width: 100%;
@@ -133,18 +235,24 @@
 .sd-paneldynamic__panel-footer {
     border-top: none;
     position: relative;
-    top: calc(0.5 * var(--sd-base-vertical-padding));
+    padding: var(--sjs2-layout-component-panel-dynamic-footer-padding-top) var(--sjs2-layout-component-panel-dynamic-footer-padding-right) var(--sjs2-layout-component-panel-dynamic-footer-padding-bottom) var(--sjs2-layout-component-panel-dynamic-footer-padding-left);
     justify-content: flex-end;
+    padding-top: 0;
+    margin-top: calc(var(--sjs2-spacing-negative-x300));
     --sd-action-bar-gap: var(--sjs2-layout-component-panel-footer-action-group-gap);
-}
 
-.sd-paneldynamic__panel-footer {
+    &.sd-action-bar--empty {
+        display: none;
+    }
     .sd-action-bar__item:not(.sd-action-bar__item--hidden) {
         margin-bottom: var(--sjs2-spacing-negative-x100);
     }
 }
+
 .sd-paneldynamic__tabs-container {
     padding-top: var(--sd-base-padding);
+    padding-left: var(--sjs2-layout-component-panel-dynamic-header-padding-left);
+    padding-right: var(--sjs2-layout-component-panel-dynamic-header-padding-right);
     .sd-tabs-toolbar {
         margin-bottom: -1px;
     }
@@ -155,13 +263,20 @@
         position: relative;
         background: $border-light;
         bottom: 0;
-        inset-inline-start: calc(-1 * var(--sd-base-padding));
-        width: calc(100% + 2 * var(--sd-base-padding));
+        margin: 0 calc(-1 * var(--sjs2-layout-component-panel-dynamic-header-padding-right)) 0 calc(-1 * var(--sjs2-layout-component-panel-dynamic-header-padding-left));
     }
 }
 .sd-paneldynamic__tabs-container--with-header {
     padding-top: var(--sjs2-spacing-x300);
 }
+.sd-root-modern--mobile {
+    .sd-paneldynamic__tabs-container--with-header {
+        &:after {
+            margin: 0 var(--sjs2-spacing-negative-x300);
+        }
+    }
+}
+
 .sd-tabs-toolbar.sd-action-bar {
     align-items: flex-start;
     z-index: 1;
@@ -270,20 +385,20 @@
     content: none;
 }
 
-.sd-question--paneldynamic.sd-element--with-frame {
-    padding-bottom: 0;
-}
-
 .sd-paneldynamic__panels-container {
     position: relative;
     overflow: hidden;
-    margin-left: calc(-1 * var(--sd-base-padding));
-    padding-left: var(--sd-base-padding);
-    margin-right: calc(-1 * var(--sd-base-padding));
-    padding-right: var(--sd-base-padding);
+    padding-top: var(--sjs2-layout-component-panel-dynamic-content-area-padding-top);
+    padding-bottom: var(--sjs2-layout-component-panel-dynamic-content-area-padding-bottom);
+    padding-inline-start: var(--sjs2-layout-component-panel-dynamic-content-area-padding-horizontal);
+    padding-inline-end: var(--sjs2-layout-component-panel-dynamic-content-area-padding-horizontal);
+    row-gap: var(--sjs2-layout-component-panel-dynamic-content-area-gap-vertical);
+    column-gap: var(--sjs2-layout-component-panel-dynamic-content-area-gap-horizontal);
 }
+
 .sd-paneldynamic__panel-wrapper {
     box-sizing: border-box;
+    position: relative;
 }
 
 @keyframes movePanel {
diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index a030bfed0b..f527be1628 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -5,83 +5,151 @@
   position: relative;
 }
 
-.sd-question--no-pointer-events {
-
-  .sd-selectbase,
-  .sd-rating {
-    label {
-      pointer-events: none;
+.sd-question__container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--sjs2-layout-component-panel-simple-box-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-simple-box-padding-bottom);
+  padding-left: var(--sjs2-layout-component-panel-simple-box-padding-horizontal);
+  padding-right: var(--sjs2-layout-component-panel-simple-box-padding-horizontal);
+  row-gap: var(--sjs2-layout-component-panel-simple-box-gap-vertical);
+  column-gap: var(--sjs2-layout-component-panel-simple-box-gap-horizontal);
+}
+
+.sd-element--with-frame > .sd-question__container {
+  gap: 0;
+}
+// TODO: Refactor
+.sd-composite > .sd-question__container > .sd-question__header-and-content-container {
+  padding: 0;
+  &>.sd-question__header {
+    padding-left: calc(var(--sjs2-layout-component-question-header-padding-left) + var(--sv-element-add-padding-left, 0px));
+    padding-right: calc(var(--sjs2-layout-component-question-header-padding-right) + var(--sv-element-add-padding-right, 0px));
+    & ~ hr {
+      width: 100%;
+      left: 0;
+      margin-left: 0;
+    }
+  }
+  &>.sd-question__header ~ .sd-question__content {
+    padding: 0;
+    &>.sd-panel>.sd-panel__content {
+      padding-top: calc(var(--sd-base-padding) - 0.5 * var(--sd-base-vertical-padding));
     }
   }
 }
 
-.sd-element__erbox--above-element {
-  margin-bottom: var(--sjs2-spacing-x100);
-}
-
-.sd-question__erbox--below-question {
-  margin-top: var(--sjs2-spacing-x100);
+.sd-question__header-and-content-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  padding-top: var(--sjs2-layout-component-panel-simple-content-area-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-simple-content-area-padding-bottom);
+  padding-left: calc(var(--sjs2-layout-component-panel-simple-content-area-padding-horizontal) + var(--sv-element-add-padding-left, 0px));
+  padding-right: calc(var(--sjs2-layout-component-panel-simple-content-area-padding-horizontal) + var(--sv-element-add-padding-right, 0px));
+  row-gap: var(--sjs2-layout-component-panel-simple-content-area-gap-vertical);
+  column-gap: var(--sjs2-layout-component-panel-simple-content-area-gap-horizontal);
 }
 
-.sd-question__content--support-container-queries {
-  container-type: inline-size;
+// TODO: Remove after new design system is implemented
+.sd-element--with-frame.sd-question--title-top:not(.sd-element--collapsed):not(.sd-question--paneldynamic) > .sd-question__container {
+  &>.sd-question__header-and-content-container {
+    padding-top: var(--sd-base-vertical-padding);
+  }
 }
-
-.sd-question--title-top>.sd-question__erbox--above-question {
-  margin-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+.sd-element--with-frame.sd-question--title-top:not(.sd-element--collapsed):not(.sd-element--complex)>div>.sd-element__erbox--above-element {
+  &~.sd-question__header-and-content-container {
+    padding-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
+  }
 }
 
-.sd-question--description-under-input>.sd-question__erbox--below-question,
-.sd-question--title-bottom>.sd-question__erbox--below-question {
-  margin-top: calc(0.25 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x050));
+.sd-question--title-bottom > .sd-question__container {
+  &>.sd-question__header-and-content-container {
+    row-gap: calc(0.375 * var(--sd-base-vertical-padding));
+  }
 }
-
-.sd-element--with-frame>.sd-element__erbox--above-element {
-  margin-bottom: var(--sd-base-padding);
-  border-radius: var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel) 0 0;
+// TODO: Remove after new design system is implemented
+.sd-element--nested {
+  &.sd-question--error-top.sd-question--left,
+  &.sd-question--error-bottom:not(.sd-question--left) {
+    &> .sd-question__container {
+      row-gap: var(--sjs2-spacing-x100);
+    }
+  }
 }
 
-.sd-question--left>.sd-element__erbox--above-element {
-  margin-bottom: 0;
+.sd-question--left {
+  &>.sd-question__container {
+    &>.sd-question__header-and-content-container {
+      flex-direction: row;
+      flex-wrap: wrap;
+      column-gap: var(--sjs2-spacing-x300);
+      row-gap: var(--sjs2-spacing-x100);
+    }
+  }
 }
 
-.sd-element--with-frame.sd-question--left>.sd-element__erbox--above-element {
-  margin-bottom: calc(1 * var(--sd-base-vertical-padding));
+.sd-element--nested > div > .sd-question__header-and-content-container {
+  padding: 0;
 }
 
-.sd-element--with-frame>.sd-question__erbox--below-question {
-  margin-top: auto;
-  border-radius: 0 0 var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel);
+.sd-root--compact {
+  .sd-question:not(.sd-question--complex) > .sd-question__container {
+    &>.sd-question__header-and-content-container {
+      padding: 0;
+    }
+  }
+  .sd-question--left {
+    &>.sd-question__container {
+      row-gap: var(--sjs2-spacing-x100);
+    }
+  }
 }
 
-.sd-element--with-frame.sd-question--title-top>.sd-question__erbox--above-question {
-  margin-bottom: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
+.sd-question:not(.sd-element--with-frame) > .sd-question__container {
+  .sd-question__header-and-content-container {
+    padding: 0;
+  }
 }
 
-.sd-element--with-frame.sd-question--description-under-input>.sd-question__erbox--below-question,
-.sd-element--with-frame.sd-question--title-bottom>.sd-question__erbox--below-question {
-  margin-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
+.sd-question--single-input {
+    &>.sd-question__container {
+        &>.sd-question__header-and-content-container {
+            padding: 0;
+            &>.sd-paneldynamic__header {
+                padding: 0;
+            }
+        }
+    }
 }
 
 .sd-question__header {
-  width: 100%;
-  padding-left: var(--sjs2-layout-component-question-header-padding-left);
-  padding-right: var(--sjs2-layout-component-question-header-padding-right);
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--sjs2-layout-component-question-header-padding-top);
+  padding-bottom: var(--sjs2-layout-component-question-header-padding-bottom);
+  row-gap: var(--sjs2-layout-component-question-header-gap-vertical);
+  column-gap: var(--sjs2-layout-component-question-header-gap-horizontal);
 }
 
-.sd-question__header--location-top {
-  padding-top: var(--sjs2-layout-component-question-header-padding-top);
-  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+.sd-question__header--location--left {
+  width: auto;
+  vertical-align: top;
+  margin-top: var(--sjs2-layout-component-question-header-side-padding-top);
+  margin-bottom: var(--sjs2-layout-component-question-header-side-padding-bottom);
+  margin-left: var(--sjs2-layout-component-question-header-side-padding-left);
+  margin-right: var(--sjs2-layout-component-question-header-side-padding-right);
 }
 
-.sd-question__header--location--bottom {
-  padding-top: calc(0.375 * var(--sd-base-vertical-padding));
+.sd-question__content--left {
+  flex: 1;
+  max-width: 100%;
 }
 
 .sd-question__title {
   @include sjs2--typography--component--question--title;
-  padding: var(--sjs2-layout-component-question-title-padding-vertical)
-    var(--sjs2-layout-component-question-title-padding-horizontal);
+  padding: var(--sjs2-layout-component-question-title-padding-vertical) var(--sjs2-layout-component-question-title-padding-horizontal);
 }
 
 .sd-question__title--empty {
@@ -100,71 +168,42 @@
   padding-bottom: var(--sjs2-layout-component-question-description-padding-bottom);
 }
 
-.sd-question__description--under-input {
-  padding-top: calc(0.375 * var(--sd-base-vertical-padding));
-}
-
-.sd-question__header .sd-question__description {
-  margin-top: calc(0.25 * var(--sd-base-vertical-padding) - var(--sjs2-size-x050));
-}
-
-.sd-element--with-frame {
-  &.sd-question--title-top {
-    padding-top: var(--sd-base-vertical-padding);
-  }
-
-  &.sd-question--error-top {
-    padding-top: 0;
-  }
-
-  &.sd-question--error-bottom {
-    padding-bottom: 0;
-    display: flex;
-    flex-direction: column;
-
-    &>.sd-question__content {
-      margin-bottom: var(--sd-base-padding);
+.sd-question--no-pointer-events {
+  .sd-selectbase,
+  .sd-rating {
+    label {
+      pointer-events: none;
     }
   }
-
-  &>.sd-element__erbox {
-    margin-left: calc(-1 * var(--sd-base-padding));
-    margin-right: calc(-1 * var(--sd-base-padding));
-    width: calc(100% + 2 * var(--sd-base-padding));
-    position: sticky;
-    left: calc(-1 * var(--sd-base-padding));
-  }
 }
 
-.sd-scrollable .sd-question__content {
-  overflow-x: auto;
-  padding: var(--sjs2-spacing-x200) 0;
+.sd-question__content--support-container-queries {
+  container-type: inline-size;
 }
 
-.sd-question__header--location--left {
-  display: inline-block;
-  width: auto;
-  vertical-align: top;
-  margin-top: var(--sjs2-spacing-x150);
+.sd-element--with-frame>.sd-element__erbox--above-element {
+  border-radius: var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel) 0 0;
+}
+.sd-element--with-frame>div>.sd-element__erbox--above-element {
+  border-radius: var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel) 0 0;
 }
 
-.sd-question--left {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  column-gap: var(--sjs2-spacing-x300);
-  row-gap: calc(0.25 * var(--sd-base-vertical-padding));
+// Commented out: question erbox is no longer a direct child of the question root
+// (it is nested inside .sd-question__container), see the >div> variant below
+// .sd-element--with-frame>.sd-question__erbox--below-question {
+//   border-radius: 0 0 var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel);
+// }
+.sd-element--with-frame>div>.sd-question__erbox--below-question {
+  border-radius: 0 0 var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel);
 }
 
-.sd-question__content--left {
-  display: inline-block;
-  flex: 1;
-  margin-top: calc(0.25 * var(--sd-base-vertical-padding)) 0;
-  max-width: 100%;
+.sd-question__description--under-input {
+  padding-top: calc(0.375 * var(--sd-base-vertical-padding));
 }
 
-.sd-element--with-frame>.sd-question__content--left {
-  margin: 0;
+.sd-scrollable .sd-question__content {
+  overflow-x: auto;
+  padding: var(--sjs2-spacing-x200) 0;
 }
 
 .sd-question__required-text {
@@ -207,7 +246,3 @@
   overflow: visible;
   max-width: 100%;
 }
-
-.sd-question__content {
-  box-sizing: border-box;
-}
diff --git a/packages/survey-core/src/default-theme/blocks/sd-rating.scss b/packages/survey-core/src/default-theme/blocks/sd-rating.scss
index 8da6affc54..be3927efa7 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-rating.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-rating.scss
@@ -564,7 +564,6 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
 
   &.sd-rating__min-text {
     margin-right: var(--sjs2-spacing-x100);
-    // margin-left: var(--sjs2-spacing-x200);
     border-left: 0px;
   }
 
diff --git a/packages/survey-core/src/default-theme/blocks/sd-row.scss b/packages/survey-core/src/default-theme/blocks/sd-row.scss
index 8390867db4..d51bc1c2fc 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-row.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-row.scss
@@ -5,42 +5,6 @@
   flex-direction: row;
   width: 100%;
   box-sizing: border-box;
-  margin-top: var(--sd-base-vertical-padding);
-}
-
-.sd-row.sd-page__row {
-  margin-top: var(--sjs2-spacing-x200);
-}
-
-.sd-page__row.sd-row--compact {
-  margin-top: var(--sd-base-vertical-padding);
-}
-
-.sd-row:first-of-type {
-  margin-top: 0;
-}
-
-.sd-page__title,
-.sd-page__description {
-  & ~ .sd-row.sd-page__row:not(.sd-row--compact) {
-    margin-top: var(--sjs2-spacing-x300);
-  }
-
-  & ~ .sd-page__row.sd-row--compact {
-    margin-top: var(--sd-base-vertical-padding);
-  }
-  & ~ .sd-page__row.sd-row.sd-row--enter.sd-row-delayed-enter {
-    margin-top: 0;
-  }
-}
-
-.sd-row.sd-page__row:not(.sd-row--compact) {
-  & ~ .sd-row.sd-page__row:not(.sd-row--compact) {
-    margin-top: var(--sjs2-spacing-x200);
-  }
-  & ~ .sd-page__row.sd-row.sd-row--enter.sd-row-delayed-enter {
-    margin-top: 0;
-  }
 }
 
 .sd-row--multiple {
diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 1381b5a1eb..9367baea07 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -30,6 +30,7 @@
       )};
   }
 }
+
 .sd-table {
   width: 100%;
   border-collapse: separate;
@@ -77,81 +78,6 @@
   padding-top: var(--sjs2-spacing-x300);
 }
 
-.sd-panel:not(.sd-panel--as-page) {
-  & > .sd-panel__content {
-    .sd-table--no-header {
-      padding-top: 0;
-    }
-
-    .sd-question--table {
-      .sd-question__content {
-        padding-bottom: var(--sjs2-spacing-x025);
-        margin-bottom: var(--sjs2-spacing-negative-x025);
-        padding-top: var(--sjs2-spacing-x100);
-        margin-top: var(--sjs2-spacing-negative-x100);
-      }
-
-      & > .sd-question__header {
-        & ~ .sd-question__content {
-          padding-top: var(--sjs2-spacing-x200);
-          --animation-padding-top: #{var(--sjs2-spacing-x200)};
-
-          .sd-table--no-header {
-            padding-top: var(--sjs2-spacing-x400);
-          }
-        }
-      }
-    }
-
-    .sd-question--table > .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
-      margin-top: var(--sjs2-spacing-negative-x300);
-    }
-
-    .sd-question--table.sd-question--error-top
-      > .sd-question__content
-      .sd-table-wrapper
-      .sd-table:not(.sd-table--no-header) {
-      margin-top: 0;
-    }
-
-    &
-      > .sd-row:not(:first-of-type)
-      .sd-question--table
-      > .sd-question__content
-      .sd-table-wrapper
-      .sd-table:not(.sd-table--no-header) {
-      margin-top: var(--sjs2-spacing-negative-x200);
-    }
-
-    &
-      > .sd-row:not(:first-of-type)
-      .sd-question--table.sd-question--error-top
-      > .sd-question__content
-      .sd-table-wrapper
-      .sd-table:not(.sd-table--no-header) {
-      margin-top: var(--sjs2-spacing-x000);
-    }
-
-    .sd-question--table
-      > .sd-question__header
-      ~ .sd-question__content
-      .sd-table-wrapper
-      .sd-table:not(.sd-table--no-header) {
-      margin-top: var(--sjs2-spacing-x100);
-    }
-
-    &
-      > .sd-row:not(:first-of-type)
-      .sd-question--table
-      > .sd-question__header
-      ~ .sd-question__content
-      .sd-table-wrapper
-      .sd-table:not(.sd-table--no-header) {
-      margin-top: var(--sjs2-spacing-x100);
-    }
-  }
-}
-
 .sd-question:not(.sd-question--mobile) {
   .sd-table--alternate-rows {
     margin-left: var(--sjs2-spacing-x100);
@@ -326,8 +252,11 @@
 
 .sd-table__cell--detail-panel {
   border-top: calc(var(--sjs2-base-unit-border-width) * 8) solid transparent;
-  padding: var(--sjs2-spacing-x300) var(--sjs2-spacing-x100) var(--sjs2-spacing-x400);
+  padding: var(--sjs2-spacing-x400) var(--sjs2-spacing-x100);
   border-bottom: calc(var(--sjs2-base-unit-border-width) * 8) solid transparent;
+  .sd-panel__content {
+    padding: 0;
+  }
 }
 
 .sd-table__cell--actions,
@@ -400,12 +329,58 @@
 
 .sd-question.sd-question--table {
   position: relative;
-  overflow-x: auto;
+  &>.sd-question__container {
+    &>.sd-question__header-and-content-container {
+      overflow-x: auto;
+      .sd-question__header {
+        position: sticky;
+        left: 0;
+      }
+    }
+  }
 }
 
 .sd-question--table.sd-element--collapsed,
 .sd-question--table.sd-element--nested {
-  overflow-x: visible;
+  &>.sd-question__container {
+    &>.sd-question__header-and-content-container {
+      overflow-x: visible;
+      &>.sd-question__content {
+        margin: 0 calc(-1 * var(--sd-base-padding));
+        padding: 0 calc(var(--sd-base-padding));
+        min-width: auto;
+        overflow-x: auto;
+      }
+    }
+  }
+}
+
+// TODO: Discuss with team if we need to keep this or not.
+.sd-panel:not(.sd-panel--as-page) > .sd-panel__content > .sd-row:first-of-type {
+  .sd-question--table.sd-element--nested {
+    &>.sd-question__container {
+      &>.sd-question__header-and-content-container {
+        &>.sd-question__content:first-of-type {
+          .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+            margin-top: var(--sjs2-spacing-negative-x200);
+          }
+        }
+      }
+    }
+  }
+}
+.sd-panel:not(.sd-panel--as-page) > .sd-panel__content > .sd-row:not(:first-of-type) {
+  .sd-question--table.sd-element--nested {
+    &>.sd-question__container {
+      &>.sd-question__header-and-content-container {
+        &>.sd-question__content:first-of-type {
+          .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+            margin-top: var(--sjs2-spacing-negative-x200);
+          }
+        }
+      }
+    }
+  }
 }
 
 .sd-table-wrapper {
@@ -449,26 +424,32 @@
 }
 
 .sd-question--table {
-  & > .sd-question__header,
+  // Commented out "& > .sd-question__header": the header is no longer a direct child of
+  // the question root (sticky header is handled by the .sd-question.sd-question--table rule above)
+  // & > .sd-question__header,
   .sd-question__description--under-input .sv-string-viewer {
     position: sticky;
     left: 0;
   }
 
-  & > .sd-question__content {
-    padding-top: var(--sjs2-spacing-x200);
-    --animation-padding-top: #{var(--sjs2-spacing-x200)};
-    min-width: min-content;
-  }
-
-  &.sd-element--nested {
-    & > .sd-question__content {
-      min-width: auto;
-      overflow-x: auto;
-    }
-  }
-
-  &.sd-element--nested > .sd-question__content,
+  // Commented out: .sd-question__content is no longer a direct child of the question root
+  // (it is nested inside .sd-question__container > .sd-question__header-and-content-container)
+  // & > .sd-question__content {
+  //   padding-top: var(--sd-base-vertical-padding);
+  //   --animation-padding-top: #{var(--sd-base-vertical-padding)};
+  //   min-width: min-content;
+  // }
+
+  // Commented out: same reason, replaced by the .sd-question--table.sd-element--nested rule above
+  // &.sd-element--nested {
+  //   & > .sd-question__content {
+  //     min-width: auto;
+  //     overflow-x: auto;
+  //   }
+  // }
+
+  // Commented out "&.sd-element--nested > .sd-question__content": content is no longer a direct child of the question root
+  // &.sd-element--nested > .sd-question__content,
   &:not(.sd-element--with-frame):not(.sd-element--nested) {
     padding-right: var(--sd-base-padding);
     margin-right: calc(-1 * var(--sd-base-padding));
@@ -476,10 +457,20 @@
     margin-left: calc(-1 * var(--sd-base-padding));
     box-sizing: content-box;
   }
+
+  &:not(.sd-element--nested)>.sd-question__container {
+    &>.sd-question__header-and-content-container:first-child {
+      padding-top: calc(0.5 * var(--sd-base-vertical-padding));
+    }
+  }
 }
 
 .sd-row--multiple {
-  .sd-question--table.sd-element--nested > .sd-question__content {
+  // Commented out: content is no longer a direct child of the question root, see the updated rule below
+  // .sd-question--table.sd-element--nested > .sd-question__content {
+  //   padding-right: calc(var(--sd-base-padding) + 2px);
+  // }
+  .sd-question--table.sd-element--nested > .sd-question__container >.sd-question__header-and-content-container > .sd-question__content {
     padding-right: calc(var(--sd-base-padding) + 2px);
   }
 }
@@ -497,22 +488,26 @@
 }
 
 @mixin table_responsive {
-  &.sd-question.sd-question--table {
-    & > .sd-question__content {
-      padding-top: 0;
-      --animation-padding-top: 0;
-    }
-  }
+  // Commented out: .sd-question__content is no longer a direct child of the question root
+  // (it is nested inside .sd-question__container > .sd-question__header-and-content-container)
+  // &.sd-question.sd-question--table {
+  //   & > .sd-question__content {
+  //     padding-top: var(--sjs2-spacing-x100);
+  //     --animation-padding-top: var(--sjs2-spacing-x100);
+  //   }
+  // }
 
   &.sd-question--table,
   &.sd-question--scroll {
     overflow-x: visible;
   }
-  & > .sd-question__content {
-    min-width: auto;
-  }
+  // Commented out: content is no longer a direct child of the question root
+  // & > .sd-question__content {
+  //   min-width: auto;
+  // }
   .sd-table-wrapper {
     width: auto;
+    margin-top: calc(-1 * var(--sjs2-spacing-x100));
   }
   .sd-table {
     display: block;
@@ -615,7 +610,6 @@
       padding-top: var(--sjs2-spacing-x500);
 
       &::before {
-        // top: var(--sjs2-spacing-negative-x200);
         background-color: transparent;
       }
     }
@@ -760,12 +754,6 @@
   @include table_responsive();
 }
 
-.sd-table__cell--detail-panel {
-  .sd-panel__content {
-    padding-top: var(--sjs2-spacing-x100);
-  }
-}
-
 .sd-table__question-wrapper {
   .sd-boolean-root {
     margin: auto;
@@ -798,3 +786,47 @@
 .sd-table.sd-matrixdynamic {
   table-layout: auto;
 }
+
+////////////////////////////////////////////////////////////////////////////////////////
+
+.sd-question--table {
+  &.sd-element--with-frame {
+    &>.sd-question__container {
+      &>.sd-question__header-and-content-container {
+        &>.sd-question__content {
+          .sd-table-wrapper .sd-table.sd-table--no-header {
+          }
+          .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+          }
+          &:first-of-type { // No question header
+            .sd-table-wrapper .sd-table.sd-table--no-header {
+            }
+            .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+            }
+          }
+        }
+      }
+    }
+  }
+  &.sd-element--nested {
+    &>.sd-question__container {
+      padding: 0;
+      &>.sd-question__header-and-content-container {
+        padding: 0;
+        &>.sd-question__content {
+          .sd-table-wrapper .sd-table.sd-table--no-header {
+          }
+          .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+          }
+          &:first-of-type { // No question header
+            .sd-table-wrapper .sd-table.sd-table--no-header {
+              padding-top: 0;
+            }
+            .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/survey-core/src/default-theme/blocks/sv-list.scss b/packages/survey-core/src/default-theme/blocks/sv-list.scss
index 4b65e2bd73..1380c7ba3b 100644
--- a/packages/survey-core/src/default-theme/blocks/sv-list.scss
+++ b/packages/survey-core/src/default-theme/blocks/sv-list.scss
@@ -55,7 +55,6 @@
   width: 100%;
   align-items: center;
   box-sizing: border-box;
-  // padding: var(--sjs2-spacing-x100) var(--sjs2-spacing-x800) var(--sjs2-spacing-x100) var(--sjs2-spacing-x200);
   padding-block: var(--sjs2-spacing-x100);
   padding-inline-end: var(--sjs2-spacing-x800);
   padding-inline-start: var(--sjs2-spacing-x200);
@@ -223,7 +222,6 @@ li:focus .sv-list__item.sv-list__item--selected {
 
 .sv-list__filter {
   border-bottom: 1px solid $border-inside;
-  // padding-bottom: var(--sjs2-spacing-x100);
 }
 
 .sv-list__filter-icon {
diff --git a/packages/survey-core/src/default-theme/blocks/sv-ranking.scss b/packages/survey-core/src/default-theme/blocks/sv-ranking.scss
index e7fe909da6..72d28d4a4d 100644
--- a/packages/survey-core/src/default-theme/blocks/sv-ranking.scss
+++ b/packages/survey-core/src/default-theme/blocks/sv-ranking.scss
@@ -397,8 +397,6 @@
 
   .sv-ranking__container--empty {
     &.sv-ranking__container--to {
-      //padding-right: var(--sjs2-spacing-x300);
-
       .sv-ranking-item {
         left: initial;
       }
@@ -409,8 +407,6 @@
     }
 
     &.sv-ranking__container--from {
-      //padding-left: var(--sjs2-spacing-x300);
-
       .sv-ranking__container-placeholder {
         padding-right: var(--sjs2-spacing-x500);
       }
@@ -438,7 +434,6 @@
 }
 
 .sv-ranking__container--empty {
-  //padding: var(--sjs2-spacing-x800);
   box-sizing: border-box;
   text-align: center;
 }
diff --git a/packages/survey-core/src/default-theme/default.fontless.scss b/packages/survey-core/src/default-theme/default.fontless.scss
index 25abf3aa5d..0ddf675194 100644
--- a/packages/survey-core/src/default-theme/default.fontless.scss
+++ b/packages/survey-core/src/default-theme/default.fontless.scss
@@ -29,6 +29,7 @@
 @use "blocks/sd-formbox.scss";
 @use "blocks/sd-comment.scss";
 @use "blocks/sd-panel.scss";
+@use "blocks/sd-panel-nested.scss";
 @use "blocks/sd-signaturepad.scss";
 @use "blocks/sd-matrixdynamic.scss";
 @use "blocks/sd-table.scss";
diff --git a/packages/survey-core/src/default-theme/default.m600.scss b/packages/survey-core/src/default-theme/default.m600.scss
index 1ed53534df..95b9f0b187 100644
--- a/packages/survey-core/src/default-theme/default.m600.scss
+++ b/packages/survey-core/src/default-theme/default.m600.scss
@@ -7,6 +7,10 @@
   --sd-base-padding: var(--sjs2-spacing-x500);
   --sd-base-vertical-padding: var(--sjs2-spacing-x400);
   --sd-page-vertical-padding: var(--sjs2-spacing-x300);
+  --sjs2-spacing-large-horizontal: var(--sjs2-spacing-x500);
+  --sjs2-spacing-large-vertical: var(--sjs2-spacing-x500);
+  --sjs2-spacing-medium-horizontal: var(--sjs2-spacing-x300);
+  --sjs2-spacing-medium-vertical: var(--sjs2-spacing-x300);
 }
 
 .sd-root-modern.sd-root-modern--mobile,
@@ -14,6 +18,10 @@
   --sd-base-padding: var(--sjs2-spacing-x300);
   --sd-base-vertical-padding: var(--sjs2-spacing-x200);
   --sd-page-vertical-padding: var(--sjs2-spacing-x200);
+  --sjs2-spacing-large-horizontal: var(--sjs2-spacing-x200);
+  --sjs2-spacing-large-vertical: var(--sjs2-spacing-x300); // TODO x500
+  --sjs2-spacing-medium-horizontal: var(--sjs2-spacing-x200);
+  --sjs2-spacing-medium-vertical: var(--sjs2-spacing-x200);
 }
 
 .sd-root-modern {
@@ -22,10 +30,6 @@
       @include mixins.num_inline();
     }
 
-    // .sd-element__title--expandable:before {
-    //   inset-inline-start: var(--sjs2-spacing-negative-x250);
-    // }
-
     .sd-element__title-expandable-svg {
       inset-inline-start: var(--sjs2-spacing-negative-x250);
     }
diff --git a/packages/survey-core/src/defaultCss/defaultCss.ts b/packages/survey-core/src/defaultCss/defaultCss.ts
index 25523c11fa..2bc7079ae2 100644
--- a/packages/survey-core/src/defaultCss/defaultCss.ts
+++ b/packages/survey-core/src/defaultCss/defaultCss.ts
@@ -164,9 +164,11 @@ export var defaultCss = {
   progressTextInBar: "sd-hidden",
   page: {
     root: "sd-page sd-body__page",
+    header: "sd-page__header",
     emptyHeaderRoot: "sd-page__empty-header",
     title: "sd-title sd-page__title",
     description: "sd-description sd-page__description",
+    content: "sd-page__content",
     number: "sd-page__num",
     errorsContainer: "sd-page__errbox"
   },
@@ -187,6 +189,7 @@ export var defaultCss = {
     leave: "sd-element-wrapper--leave",
     mobile: "sd-question--mobile",
     mainRoot: "sd-element sd-question sd-row__question",
+    rootSingleInput: "sd-element sd-question--single-input",
     flowRoot: "sd-element sd-question sd-row__question sd-row__question--flow",
     withFrame: "sd-element--with-frame",
     asCell: "sd-table__cell",
@@ -259,6 +262,8 @@ export var defaultCss = {
     summaryRowAction: "sd-summary-row-action",
     summaryRowActionEdit: "sd-summary-row-action sd-summary-row-action--edit",
     summaryRowActionDelete: "sd-summary-row-action sd-summary-row-action--delete",
+    questionContainer: "sd-question__container",
+    headerAndContentContainer: "sd-question__header-and-content-container"
   },
   image: {
     mainRoot: "sd-element sd-question sd-question--image",
diff --git a/packages/survey-core/src/page.ts b/packages/survey-core/src/page.ts
index f50a39533a..43d0e2f561 100644
--- a/packages/survey-core/src/page.ts
+++ b/packages/survey-core/src/page.ts
@@ -231,6 +231,12 @@ export class PageModel extends PanelModel implements IPage {
         !((<any>this.survey).isShowProgressBarOnTop && !(<any>this.survey).isStaring))
       .toString();
   }
+  public get cssHeader(): string {
+    return this.cssClasses.page?.header || this.cssClasses.panel?.header;
+  }
+  public get cssContent(): string {
+    return this.cssClasses.page?.content || this.cssClasses.panel?.content;
+  }
   protected getCssError(cssClasses: any): string {
     if (this.isPanel) return super.getCssError(cssClasses);
     return new CssClassBuilder()
diff --git a/packages/survey-core/src/question.ts b/packages/survey-core/src/question.ts
index bf0b3be656..92657a26b6 100644
--- a/packages/survey-core/src/question.ts
+++ b/packages/survey-core/src/question.ts
@@ -1521,6 +1521,7 @@ export class Question extends SurveyElement<Question>
   public getRootCss(): string {
     return new CssClassBuilder()
       .append(this.cssRoot, !this.singleInputQuestion)
+      .append(this.cssClasses.rootSingleInput, !!this.singleInputQuestion)
       .append(this.cssClasses.mobile, this.isMobile)
       .append(this.cssClasses.readOnly, this.isReadOnlyStyle)
       .append(this.cssClasses.disabled, this.isDisabledStyle)
@@ -1528,7 +1529,21 @@ export class Question extends SurveyElement<Question>
       .append(this.cssClasses.invisible, !this.isDesignMode && this.areInvisibleElementsShowing && !this.visible)
       .toString();
   }
-
+  public getQuestionContainerCss(): string {
+    return new CssClassBuilder()
+      .append(this.cssClasses.questionContainer)
+      .toString();
+  }
+  public getHeaderAndContentContainerCss(): string {
+    return new CssClassBuilder()
+      .append(this.cssClasses.headerAndContentContainer)
+      .toString();
+  }
+  public get isComplexQuestion(): boolean {
+    const rootCss = this.getRootCss() || "";
+    return rootCss.indexOf("sd-element--complex") > -1;
+    // return this.isContainer || !!this.singleInputQuestion;
+  }
   public getQuestionRootCss() {
     return new CssClassBuilder()
       .append(this.cssClasses.root)
diff --git a/packages/survey-core/src/question_paneldynamic.ts b/packages/survey-core/src/question_paneldynamic.ts
index d98e4355b6..e256373c19 100644
--- a/packages/survey-core/src/question_paneldynamic.ts
+++ b/packages/survey-core/src/question_paneldynamic.ts
@@ -2477,12 +2477,14 @@ export class QuestionPanelDynamicModel extends Question implements IDynamicItemM
     return getLocaleString("progressbar", this.getLocale());
   }
   public getRootCss(): string {
-    return new CssClassBuilder().append(super.getRootCss()).append(this.cssClasses.empty, this.getShowNoEntriesPlaceholder()).toString();
+    return new CssClassBuilder().append(super.getRootCss()).append(this.cssClasses.empty, this.getShowNoEntriesPlaceholder())
+      .append(this.cssClasses.navigation + "--top", this.isRangeShowing && this.isProgressTopShowing).append(this.cssClasses.navigation + "--bottom", this.isRangeShowing && this.isProgressBottomShowing).toString();
   }
   public get cssHeader(): string {
     const showTab = this.isRenderModeTab && !!this.visiblePanelCount;
     return new CssClassBuilder()
       .append(super.getCssHeader(this.cssClasses))
+      .append(this.cssClasses.root + "__header-" + this.displayMode, this.displayMode !== "tab")
       .append(this.cssClasses.headerTab, this.hasTitleOnTop && showTab)
       .toString();
   }
diff --git a/packages/survey-core/tests/question_paneldynamic_tests.ts b/packages/survey-core/tests/question_paneldynamic_tests.ts
index 9f8ee1a70c..3f19cba95e 100644
--- a/packages/survey-core/tests/question_paneldynamic_tests.ts
+++ b/packages/survey-core/tests/question_paneldynamic_tests.ts
@@ -5681,10 +5681,10 @@ describe("Survey_QuestionPanelDynamic", () => {
     expect(panel.cssHeader).toBe("sv-paneldynamic__header sv_header sv-paneldynamic__header-tab");
 
     panel.renderMode = undefined;
-    expect(panel.cssHeader).toBe("sv-paneldynamic__header sv_header");
+    expect(panel.cssHeader).toBe("sv-paneldynamic__header sv_header sv_panel_dynamic__header-list");
 
     panel.titleLocation = "hidden";
-    expect(panel.cssHeader).toBe("sv-paneldynamic__header sv_header");
+    expect(panel.cssHeader).toBe("sv-paneldynamic__header sv_header sv_panel_dynamic__header-list");
 
     panel.displayMode = "tab";
     panel.titleLocation = "top";
diff --git a/packages/survey-react-ui/src/page.tsx b/packages/survey-react-ui/src/page.tsx
index 0dd1ccca97..18941ce435 100644
--- a/packages/survey-react-ui/src/page.tsx
+++ b/packages/survey-react-ui/src/page.tsx
@@ -28,12 +28,22 @@ export class SurveyPage extends SurveyPanelBase {
         creator={this.creator}
       />
     );
+    var header: any = null;
+    if (this.page.hasTitle || this.page._showDescription) {
+      header = (
+        <div className={this.page.cssHeader}>
+          {title}
+          {description}
+        </div>
+      );
+    }
     return (
       <div ref={this.rootRef} className={this.page.cssRoot}>
-        {title}
-        {description}
-        {errors}
-        {rows}
+        {header}
+        <div className={this.page.cssContent}>
+          {errors}
+          {rows}
+        </div >
       </div >
     );
   }
diff --git a/packages/survey-react-ui/src/panel.tsx b/packages/survey-react-ui/src/panel.tsx
index e60f9214da..46c9853072 100644
--- a/packages/survey-react-ui/src/panel.tsx
+++ b/packages/survey-react-ui/src/panel.tsx
@@ -27,16 +27,23 @@ export class SurveyPanel extends SurveyPanelBase {
         creator={this.creator}
       />
     );
-    const style = {
-      paddingLeft: this.panel.innerPaddingLeft,
+    // const panelPaddingHorizontal = "var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500))";
+    const panelPaddingHorizontal = this.panel.isDesignMode ? "var(--sjs2-spacing-x000)" : "var(--sd-base-padding, var(--sjs2-spacing-x500))";
+    const style: React.CSSProperties = {
+      paddingInlineStart: this.panel.innerPaddingLeft
+        ? `calc(${panelPaddingHorizontal} + ${this.panel.innerPaddingLeft})`
+        : this.panel.innerPaddingLeft,
+      // paddingInlineEnd: this.panel.innerPaddingLeft ? panelPaddingHorizontal : undefined,
       display: this.panel.renderedIsExpanded ? undefined : "none",
     };
     let content: React.JSX.Element | null = null;
+    let bottom: React.JSX.Element | null = null;
     if (this.panel.renderedIsExpanded) {
       // this.hasBeenExpanded = true;
       const rows: React.JSX.Element[] = this.renderRows(this.panelBase.cssClasses);
       const className: string = this.panelBase.cssClasses.panel.content;
       content = this.renderContent(style, rows, className);
+      bottom = this.renderBottom();
     }
     const focusIn = () => {
       if (this.panelBase) (this.panelBase as PanelModel).focusIn();
@@ -53,6 +60,7 @@ export class SurveyPanel extends SurveyPanelBase {
         {header}
         {this.panel.showErrorsAbovePanel ? null : errors}
         {content}
+        {bottom}
       </div>
     );
   }
@@ -71,7 +79,6 @@ export class SurveyPanel extends SurveyPanelBase {
     return wrapper ?? element;
   }
   protected renderContent(style: any, rows: React.JSX.Element[], className: string): React.JSX.Element {
-    const bottom: React.JSX.Element | null = this.renderBottom();
     return (
       <div
         style={style} className={className}
@@ -80,7 +87,6 @@ export class SurveyPanel extends SurveyPanelBase {
         aria-labelledby={this.panel.ariaLabelledBy}
         aria-label={this.panel.ariaLabel}>
         {rows}
-        {bottom}
       </div>
     );
   }
diff --git a/packages/survey-react-ui/src/reactquestion.tsx b/packages/survey-react-ui/src/reactquestion.tsx
index 0349b8f825..dfba37ca9a 100644
--- a/packages/survey-react-ui/src/reactquestion.tsx
+++ b/packages/survey-react-ui/src/reactquestion.tsx
@@ -162,11 +162,16 @@ export class SurveyQuestion extends SurveyElementBase<any, any> {
           aria-expanded={question.ariaExpanded}
         >
           {singleBreadcrumbs}
-          {errorsAboveQuestion}
-          {headerTop}
-          {questionContent}
-          {headerBottom}
-          {errorsBelowQuestion}
+          <div className={question.getQuestionContainerCss()}>
+            {errorsAboveQuestion}
+            <div className={question.getHeaderAndContentContainerCss()}>
+              {headerTop}
+              {headerTop && question.isComplexQuestion ? <hr /> : null}
+              {questionContent}
+              {headerBottom}
+            </div>
+            {errorsBelowQuestion}
+          </div>
         </div>
       </>
     );
diff --git a/packages/survey-react-ui/src/reactquestion_paneldynamic.tsx b/packages/survey-react-ui/src/reactquestion_paneldynamic.tsx
index d8a1eb3e1f..2eaf056f45 100644
--- a/packages/survey-react-ui/src/reactquestion_paneldynamic.tsx
+++ b/packages/survey-react-ui/src/reactquestion_paneldynamic.tsx
@@ -87,6 +87,7 @@ export class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase {
   protected renderNavigator(): React.JSX.Element | null {
     if (!this.question.showNavigation) return null;
     const range: React.JSX.Element | null = this.question.isRangeShowing && this.question.isProgressBottomShowing ? this.renderRange() : null;
+    if (!range && !this.question.showFooterToolbar) return null;
     return (<div className={this.question.cssClasses.footer}>
       <hr className={this.question.cssClasses.separator} />
       {range}
diff --git a/packages/survey-vue3-ui/src/Page.vue b/packages/survey-vue3-ui/src/Page.vue
index b9e7003aba..1c12aea236 100644
--- a/packages/survey-vue3-ui/src/Page.vue
+++ b/packages/survey-vue3-ui/src/Page.vue
@@ -1,21 +1,25 @@
 <template>
   <div :class="page.cssRoot" ref="root">
-    <SvComponent :is="'survey-element-title'" :element="page" :css="css" />
-    <div v-if="showDescription" :class="page.cssClasses.page.description">
-      <SvComponent :is="'survey-string'" :locString="page.locDescription" />
+    <div v-if="page.hasTitle || showDescription" :class="page.cssHeader">
+      <SvComponent :is="'survey-element-title'" :element="page" :css="css" />
+      <div v-if="showDescription" :class="page.cssClasses.page.description">
+        <SvComponent :is="'survey-string'" :locString="page.locDescription" />
+      </div>
     </div>
-    <SvComponent :is="'survey-errors'" :element="page" />
-    <template v-for="row in page.visibleRows" :key="row.id">
-      <SvComponent
-        :is="(page.getSurvey() as SurveyModel).getRowWrapperComponentName(row)"
-        v-bind="{
+    <div :class="page.cssContent">
+      <SvComponent :is="'survey-errors'" :element="page" />
+      <template v-for="row in page.visibleRows" :key="row.id">
+        <SvComponent
+          :is="(page.getSurvey() as SurveyModel).getRowWrapperComponentName(row)"
+          v-bind="{
             componentData: (page.getSurvey() as SurveyModel).getRowWrapperComponentData(row),
           }"
-      >
-        <SvComponent :is="'survey-row'" :row="row" :survey="survey" :css="css">
+        >
+          <SvComponent :is="'survey-row'" :row="row" :survey="survey" :css="css">
+          </SvComponent>
         </SvComponent>
-      </SvComponent>
-    </template>
+      </template>
+    </div>
   </div>
 </template>
 
diff --git a/packages/survey-vue3-ui/src/Panel.vue b/packages/survey-vue3-ui/src/Panel.vue
index 2ff7553204..cf5cc419da 100644
--- a/packages/survey-vue3-ui/src/Panel.vue
+++ b/packages/survey-vue3-ui/src/Panel.vue
@@ -24,7 +24,7 @@
     />
     <div
       :id="element.contentId"
-      :style="{ paddingLeft: element.innerPaddingLeft }"
+      :style="panelContentStyle"
       v-if="element.renderedIsExpanded"
       :class="element.cssClasses.panel.content"
       :role="element.ariaRole"
@@ -47,11 +47,12 @@
           </SvComponent>
         </SvComponent>
       </template>
-      <SvComponent
-        :is="'sv-action-bar'"
-        :model="element.getFooterToolbar()"
-      ></SvComponent>
     </div>
+    <SvComponent
+      :is="'sv-action-bar'"
+      v-if="element.renderedIsExpanded && element.getFooterToolbar().hasActions"
+      :model="element.getFooterToolbar()"
+    ></SvComponent>
   </div>
 </template>
 
@@ -75,6 +76,15 @@ const props = defineProps<{
 }>();
 const root = ref<HTMLElement>(null as any);
 const survey = computed(() => props.element.survey);
+const panelPaddingHorizontal = "var(--sd-base-padding, var(--sjs2-spacing-x500))";
+const panelContentStyle = computed(() => {
+  const innerPaddingLeft = props.element.innerPaddingLeft;
+  return innerPaddingLeft
+    ? {
+        paddingInlineStart: `calc(${panelPaddingHorizontal} + ${innerPaddingLeft})`,
+      }
+    : {};
+});
 
 useBase(() => props.element);
 
diff --git a/packages/survey-vue3-ui/src/PanelDynamicProgress.vue b/packages/survey-vue3-ui/src/PanelDynamicProgress.vue
index 8e25f888cd..ace18b2762 100644
--- a/packages/survey-vue3-ui/src/PanelDynamicProgress.vue
+++ b/packages/survey-vue3-ui/src/PanelDynamicProgress.vue
@@ -1,5 +1,11 @@
 <template>
-  <div :class="question.cssClasses.footer" v-if="!!question.cssClasses.footer">
+  <div
+    :class="question.cssClasses.footer"
+    v-if="
+      (question.isRangeShowing && question.isProgressBottomShowing) ||
+      question.showFooterToolbar
+    "
+  >
     <hr :class="question.cssClasses.separator" />
     <div
       :class="question.cssClasses.progress"
diff --git a/packages/survey-vue3-ui/src/Question.vue b/packages/survey-vue3-ui/src/Question.vue
index 0157271e65..9974c85c90 100644
--- a/packages/survey-vue3-ui/src/Question.vue
+++ b/packages/survey-vue3-ui/src/Question.vue
@@ -20,79 +20,84 @@
       :model="element.singleInputActions"
       :css="element.cssClasses"
     />
-    <SvComponent
-      :is="'survey-errors'"
-      v-if="element.showErrorsAboveQuestion"
-      :element="element"
-      :location="'top'"
-    />
-    <SvComponent
-      :is="'survey-element-header'"
-      v-if="element.hasTitleOnLeftTop"
-      :element="element"
-      :css="element.cssClasses"
-    />
-    <SvComponent
-      :is="'sv-single-input-summary'"
-      v-if="element.singleInputSummary"
-      :css="element.cssClasses"
-      :summary="element.singleInputSummary"
-    ></SvComponent>
-    <SvComponent
-      :is="'survey-question'"
-      v-else-if="singleQuestion"
-      :css="css"
-      :element="singleQuestion"
-      :survey="survey"
-      :key="(singleQuestion as any).id"
-    ></SvComponent>
-    <SvComponent
-      v-else
-      :is="contentComponentName"
-      v-bind="contentComponentData"
-    >
-      <div
-        :class="getContentClass(element) || undefined"
-        :aria-hidden="element.contentAriaHidden"
-        :style="{ display: !element.renderedIsExpanded ? 'none' : undefined }"
-        role="presentation"
-        :data-sv-drop-target-matrix="element.dragDropMatrixAttribute"
-        :data-sv-drop-target-matrix-row="element.dragDropMatrixAttribute"
-      >
-        <SvComponent :is="componentName" :question="element" />
-        <div v-if="element.hasComment" :class="element.getCommentAreaCss()">
-          <div>
-            <SvComponent
-              :is="'survey-string'"
-              :locString="element.locCommentText"
-            />
-          </div>
-          <SvComponent :is="'survey-question-comment'" :question="element" />
-        </div>
-        <div
-          v-if="element.hasDescriptionUnderInput"
-          :class="element.cssDescription"
-          :id="element.ariaDescriptionId"
+    <div :class="element.getQuestionContainerCss()">
+      <SvComponent
+        :is="'survey-errors'"
+        v-if="element.showErrorsAboveQuestion"
+        :element="element"
+        :location="'top'"
+      />
+      <div :class="element.getHeaderAndContentContainerCss()">
+        <SvComponent
+          :is="'survey-element-header'"
+          v-if="element.hasTitleOnLeftTop"
+          :element="element"
+          :css="element.cssClasses"
+        />
+        <hr v-if="element.hasTitleOnLeftTop && element.isComplexQuestion" />
+        <SvComponent
+          :is="'sv-single-input-summary'"
+          v-if="element.singleInputSummary"
+          :css="element.cssClasses"
+          :summary="element.singleInputSummary"
+        ></SvComponent>
+        <SvComponent
+          :is="'survey-question'"
+          v-else-if="singleQuestion"
+          :css="css"
+          :element="singleQuestion"
+          :survey="survey"
+          :key="(singleQuestion as any).id"
+        ></SvComponent>
+        <SvComponent
+          v-else
+          :is="contentComponentName"
+          v-bind="contentComponentData"
         >
-          <SvComponent
-            :is="'survey-string'"
-            :locString="element.locDescription"
-          />
-        </div>
+          <div
+            :class="getContentClass(element) || undefined"
+            :aria-hidden="element.contentAriaHidden"
+            :style="{ display: !element.renderedIsExpanded ? 'none' : undefined }"
+            role="presentation"
+            :data-sv-drop-target-matrix="element.dragDropMatrixAttribute"
+            :data-sv-drop-target-matrix-row="element.dragDropMatrixAttribute"
+          >
+            <SvComponent :is="componentName" :question="element" />
+            <div v-if="element.hasComment" :class="element.getCommentAreaCss()">
+              <div>
+                <SvComponent
+                  :is="'survey-string'"
+                  :locString="element.locCommentText"
+                />
+              </div>
+              <SvComponent :is="'survey-question-comment'" :question="element" />
+            </div>
+            <div
+              v-if="element.hasDescriptionUnderInput"
+              :class="element.cssDescription"
+              :id="element.ariaDescriptionId"
+            >
+              <SvComponent
+                :is="'survey-string'"
+                :locString="element.locDescription"
+              />
+            </div>
+          </div>
+        </SvComponent>
+        <SvComponent
+          :is="'survey-element-header'"
+          v-if="element.hasTitleOnBottom"
+          :element="element"
+          :css="css"
+        />
       </div>
-    </SvComponent>
-    <SvComponent
-      :is="'survey-element-header'"
-      v-if="element.hasTitleOnBottom"
-      :element="element"
-      :css="css"
-    />
-    <SvComponent
-      :is="'survey-errors'"
-      v-if="element.showErrorsBelowQuestion"
-      :element="element"
-      :location="'bottom'"
-    />
+      <SvComponent
+        :is="'survey-errors'"
+        v-if="element.showErrorsBelowQuestion"
+        :element="element"
+        :location="'bottom'"
+      />
+    </div>
   </div>
 </template>
 
diff --git a/screenshots/matrix.spec.ts-snapshots/question-matrix-alternate-rows-invalid-value.png b/screenshots/matrix.spec.ts-snapshots/question-matrix-alternate-rows-invalid-value.png
index 79cf7cec99..3bb1ddcff4 100644
Binary files a/screenshots/matrix.spec.ts-snapshots/question-matrix-alternate-rows-invalid-value.png and b/screenshots/matrix.spec.ts-snapshots/question-matrix-alternate-rows-invalid-value.png differ
diff --git a/screenshots/matrix.spec.ts-snapshots/question-matrix-multi-select-in-panel-no-title.png b/screenshots/matrix.spec.ts-snapshots/question-matrix-multi-select-in-panel-no-title.png
index 170b1ac88f..a8bec1723e 100644
Binary files a/screenshots/matrix.spec.ts-snapshots/question-matrix-multi-select-in-panel-no-title.png and b/screenshots/matrix.spec.ts-snapshots/question-matrix-multi-select-in-panel-no-title.png differ
diff --git a/screenshots/matrix.spec.ts-snapshots/question-matrix-single-select-in-panel-no-title.png b/screenshots/matrix.spec.ts-snapshots/question-matrix-single-select-in-panel-no-title.png
index 9342ede2a3..30c3723c05 100644
Binary files a/screenshots/matrix.spec.ts-snapshots/question-matrix-single-select-in-panel-no-title.png and b/screenshots/matrix.spec.ts-snapshots/question-matrix-single-select-in-panel-no-title.png differ
diff --git a/screenshots/paneldynamic.spec.ts b/screenshots/paneldynamic.spec.ts
index 42361def2f..de423cecf7 100644
--- a/screenshots/paneldynamic.spec.ts
+++ b/screenshots/paneldynamic.spec.ts
@@ -452,7 +452,8 @@ frameworks.forEach(framework => {
       await compareScreenshot(page, paneldynamicRoot, "panel-dynamic-comment.png");
     });
 
-    test("Paneldynamic: removePanelButtonLocation=right", async ({ page }) => {
+    // TODO: Reanimate in processing of https://github.com/surveyjs/survey-library/issues/11421
+    test.skip("Paneldynamic: removePanelButtonLocation=right", async ({ page }) => {
       await page.setViewportSize({ width: 1920, height: 1080 });
       const json = {
         "elements": [
diff --git a/screenshots/question.spec.ts-snapshots/question-scrollable-with-error.png b/screenshots/question.spec.ts-snapshots/question-scrollable-with-error.png
index 5c1241ca6e..8c6ee202f5 100644
Binary files a/screenshots/question.spec.ts-snapshots/question-scrollable-with-error.png and b/screenshots/question.spec.ts-snapshots/question-scrollable-with-error.png differ
diff --git a/screenshots/rating.spec.ts-snapshots/question-rating-selected-label-should-have-the-same-width.png b/screenshots/rating.spec.ts-snapshots/question-rating-selected-label-should-have-the-same-width.png
index 6e765b0cd2..ef7f6478be 100644
Binary files a/screenshots/rating.spec.ts-snapshots/question-rating-selected-label-should-have-the-same-width.png and b/screenshots/rating.spec.ts-snapshots/question-rating-selected-label-should-have-the-same-width.png differ
diff --git a/screenshots/readonly-preview.spec.ts-snapshots/preview-matrix-single.png b/screenshots/readonly-preview.spec.ts-snapshots/preview-matrix-single.png
index be35e44fc8..7de2dc0be6 100644
Binary files a/screenshots/readonly-preview.spec.ts-snapshots/preview-matrix-single.png and b/screenshots/readonly-preview.spec.ts-snapshots/preview-matrix-single.png differ
diff --git a/screenshots/readonly-preview.spec.ts-snapshots/readonly-matrix-single.png b/screenshots/readonly-preview.spec.ts-snapshots/readonly-matrix-single.png
index efe3f2528a..2723802989 100644
Binary files a/screenshots/readonly-preview.spec.ts-snapshots/readonly-matrix-single.png and b/screenshots/readonly-preview.spec.ts-snapshots/readonly-matrix-single.png differ
diff --git a/tests/markup/etalon.ts b/tests/markup/etalon.ts
index 9c65744e0d..726c0246f5 100644
--- a/tests/markup/etalon.ts
+++ b/tests/markup/etalon.ts
@@ -42,6 +42,6 @@ registerMarkupTests([
         }
       ]
     },
-    etalon: "<div class=\"sd-html\">HTML content here</div>"
+    etalon: "<div class=\"sd-question__header-and-content-container\"><div class=\"sd-element__content sd-question__content\" role=\"presentation\"><div class=\"sd-html\">HTML content here</div></div></div>"
   },
 ]);
\ No newline at end of file
diff --git a/tests/markup/helper.ts b/tests/markup/helper.ts
index 96e642ecbe..b888fa7819 100644
--- a/tests/markup/helper.ts
+++ b/tests/markup/helper.ts
@@ -274,9 +274,9 @@ export function testQuestionMarkup(assert: any, test: MarkupTestDescriptor, plat
   platform.render(platform.survey, surveyElement);
 }
 
-const removeExtraElementsConditions: Array<(htmlElement: HTMLElement) => boolean> = [
-  (htmlElement: HTMLElement) => htmlElement.classList.contains("sv-vue-title-additional-div"),
-  (HTMLElement: HTMLElement) => HTMLElement.tagName.toLowerCase().search(/^sv-/) > -1
+const removeExtraElementsConditions: Array<(e: HTMLElement) => boolean> = [
+  (e: HTMLElement) => e.classList.contains("sv-vue-title-additional-div"),
+  (e: HTMLElement) => e.tagName.toLowerCase().search(/^sv-/) > -1,
 ];
 
 function clearExtraElements(innerHTML: string): string {
diff --git a/tests/markup/snapshots/boolean-checkbox-custom-icon.snap.html b/tests/markup/snapshots/boolean-checkbox-custom-icon.snap.html
index 9bd97e60be..e76b500ceb 100644
--- a/tests/markup/snapshots/boolean-checkbox-custom-icon.snap.html
+++ b/tests/markup/snapshots/boolean-checkbox-custom-icon.snap.html
@@ -1,18 +1,22 @@
-<div class="sd-selectbase">
-	<div class="sd-checkbox sd-checkbox--intermediate sd-checkbox--label-rendered sd-item sd-selectbase__item">
-		<label class="sd-selectbase__label">
-			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#test-icon" class="">
-					</use>
-				</svg>
-				<span class="check">
-				</span>
-			</span>
-			<span class="sd-item__control-label" id="testid0_ariaTitle">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sd-checkbox sd-checkbox--intermediate sd-checkbox--label-rendered sd-item sd-selectbase__item">
+				<label class="sd-selectbase__label">
+					<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#test-icon" class="">
+							</use>
+						</svg>
+						<span class="check">
+						</span>
+					</span>
+					<span class="sd-item__control-label" id="testid0_ariaTitle">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+					</span>
+				</label>
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-checkbox-defaultV2-required.snap.html b/tests/markup/snapshots/boolean-checkbox-defaultV2-required.snap.html
index 4013276f60..f4a14047db 100644
--- a/tests/markup/snapshots/boolean-checkbox-defaultV2-required.snap.html
+++ b/tests/markup/snapshots/boolean-checkbox-defaultV2-required.snap.html
@@ -1,16 +1,20 @@
-<div class="sd-selectbase">
-	<div class="sd-checkbox sd-checkbox--intermediate sd-checkbox--label-rendered sd-item sd-selectbase__item">
-		<label class="sd-selectbase__label">
-			<input aria-invalid="false" aria-label="Question title" aria-required="true" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<span class="check">
-				</span>
-			</span>
-			<span class="sd-item__control-label" id="testid0_ariaTitle">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-				<span>&nbsp;</span>
-				<span aria-hidden="true" class="sd-question__required-text">*</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sd-checkbox sd-checkbox--intermediate sd-checkbox--label-rendered sd-item sd-selectbase__item">
+				<label class="sd-selectbase__label">
+					<input aria-invalid="false" aria-label="Question title" aria-required="true" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<span class="check">
+						</span>
+					</span>
+					<span class="sd-item__control-label" id="testid0_ariaTitle">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+						<span>&nbsp;</span>
+						<span aria-hidden="true" class="sd-question__required-text">*</span>
+					</span>
+				</label>
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-checkbox-defaultV2.snap.html b/tests/markup/snapshots/boolean-checkbox-defaultV2.snap.html
index cea03058b8..c14f8ce062 100644
--- a/tests/markup/snapshots/boolean-checkbox-defaultV2.snap.html
+++ b/tests/markup/snapshots/boolean-checkbox-defaultV2.snap.html
@@ -1,18 +1,22 @@
-<div class="sd-selectbase">
-	<div class="sd-checkbox sd-checkbox--checked sd-checkbox--label-rendered sd-item sd-item--checked sd-selectbase__item">
-		<label class="sd-selectbase__label">
-			<input aria-invalid="false" aria-label="Question title" aria-required="false" checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="true">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-				<span class="check">
-				</span>
-			</span>
-			<span class="sd-item__control-label" id="testid0_ariaTitle">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sd-checkbox sd-checkbox--checked sd-checkbox--label-rendered sd-item sd-item--checked sd-selectbase__item">
+				<label class="sd-selectbase__label">
+					<input aria-invalid="false" aria-label="Question title" aria-required="false" checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="true">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+						<span class="check">
+						</span>
+					</span>
+					<span class="sd-item__control-label" id="testid0_ariaTitle">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+					</span>
+				</label>
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-checkbox-disabled.snap.html b/tests/markup/snapshots/boolean-checkbox-disabled.snap.html
index 49e65c89b0..42d38170b2 100644
--- a/tests/markup/snapshots/boolean-checkbox-disabled.snap.html
+++ b/tests/markup/snapshots/boolean-checkbox-disabled.snap.html
@@ -1,14 +1,18 @@
-<div class="sd-selectbase">
-	<div class="sd-checkbox sd-checkbox--intermediate sd-checkbox--label-rendered sd-item sd-selectbase__item">
-		<label class="sd-selectbase__label">
-			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" disabled="" id="testid0i" name="name" type="checkbox" value="">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<span class="check">
-				</span>
-			</span>
-			<span class="sd-item__control-label" id="testid0_ariaTitle">
-				<span class="sv-string-editor" contenteditable="true">Question title</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sd-checkbox sd-checkbox--intermediate sd-checkbox--label-rendered sd-item sd-selectbase__item">
+				<label class="sd-selectbase__label">
+					<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" disabled="" id="testid0i" name="name" type="checkbox" value="">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<span class="check">
+						</span>
+					</span>
+					<span class="sd-item__control-label" id="testid0_ariaTitle">
+						<span class="sv-string-editor" contenteditable="true">Question title</span>
+					</span>
+				</label>
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-checkbox-readonly-defaultV2.snap.html b/tests/markup/snapshots/boolean-checkbox-readonly-defaultV2.snap.html
index 6cb04d12fe..a8e8ad8015 100644
--- a/tests/markup/snapshots/boolean-checkbox-readonly-defaultV2.snap.html
+++ b/tests/markup/snapshots/boolean-checkbox-readonly-defaultV2.snap.html
@@ -1,18 +1,22 @@
-<div class="sd-selectbase">
-	<div class="sd-checkbox sd-checkbox--checked sd-checkbox--label-rendered sd-checkbox--readonly sd-item sd-item--checked sd-item--readonly sd-selectbase__item">
-		<label class="sd-selectbase__label">
-			<input aria-invalid="false" aria-label="Question title" aria-required="false" checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" readonly="" type="checkbox" value="true">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-				<span class="check">
-				</span>
-			</span>
-			<span class="sd-item__control-label" id="testid0_ariaTitle">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sd-checkbox sd-checkbox--checked sd-checkbox--label-rendered sd-checkbox--readonly sd-item sd-item--checked sd-item--readonly sd-selectbase__item">
+				<label class="sd-selectbase__label">
+					<input aria-invalid="false" aria-label="Question title" aria-required="false" checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" readonly="" type="checkbox" value="true">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+						<span class="check">
+						</span>
+					</span>
+					<span class="sd-item__control-label" id="testid0_ariaTitle">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+					</span>
+				</label>
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-checkbox.snap.html b/tests/markup/snapshots/boolean-checkbox.snap.html
index 22c474453f..6c12c9139b 100644
--- a/tests/markup/snapshots/boolean-checkbox.snap.html
+++ b/tests/markup/snapshots/boolean-checkbox.snap.html
@@ -1,14 +1,18 @@
-<div class="sd-selectbase">
-	<div class="sd-checkbox sd-checkbox--intermediate sd-checkbox--label-rendered sd-item sd-selectbase__item">
-		<label class="sd-selectbase__label">
-			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<span class="check">
-				</span>
-			</span>
-			<span class="sd-item__control-label" id="testid0_ariaTitle">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sd-checkbox sd-checkbox--intermediate sd-checkbox--label-rendered sd-item sd-selectbase__item">
+				<label class="sd-selectbase__label">
+					<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<span class="check">
+						</span>
+					</span>
+					<span class="sd-item__control-label" id="testid0_ariaTitle">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+					</span>
+				</label>
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-disabled.snap.html b/tests/markup/snapshots/boolean-disabled.snap.html
index d296413e39..8a9cc16d9a 100644
--- a/tests/markup/snapshots/boolean-disabled.snap.html
+++ b/tests/markup/snapshots/boolean-disabled.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
-	<label class="sd-boolean sd-boolean--indeterminate">
-		<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-boolean__control sd-visuallyhidden" disabled="" id="testid0i" name="name" role="switch" type="checkbox" value="">
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label">
-				<span class="sv-string-editor" contenteditable="true">No</span>
-			</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
+			<label class="sd-boolean sd-boolean--indeterminate">
+				<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-boolean__control sd-visuallyhidden" disabled="" id="testid0i" name="name" role="switch" type="checkbox" value="">
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label">
+						<span class="sv-string-editor" contenteditable="true">No</span>
+					</span>
+				</div>
+				<div class="sd-boolean__switch">
+					<span class="sd-boolean__thumb">
+					</span>
+				</div>
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label">
+						<span class="sv-string-editor" contenteditable="true">Yes</span>
+					</span>
+				</div>
+			</label>
 		</div>
-		<div class="sd-boolean__switch">
-			<span class="sd-boolean__thumb">
-			</span>
-		</div>
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label">
-				<span class="sv-string-editor" contenteditable="true">Yes</span>
-			</span>
-		</div>
-	</label>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-radio-disabled.snap.html b/tests/markup/snapshots/boolean-radio-disabled.snap.html
index bcd676ecca..75758929fb 100644
--- a/tests/markup/snapshots/boolean-radio-disabled.snap.html
+++ b/tests/markup/snapshots/boolean-radio-disabled.snap.html
@@ -1,32 +1,36 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
-	<fieldset class="sd-selectbase" role="presentation">
-		<div class="sd-item" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" name="name_testid0" type="radio" value="false">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-editor" contenteditable="true">No</span>
-				</span>
-			</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
+			<fieldset class="sd-selectbase" role="presentation">
+				<div class="sd-item" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" name="name_testid0" type="radio" value="false">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-editor" contenteditable="true">No</span>
+						</span>
+					</label>
+				</div>
+				<div class="sd-item" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" name="name_testid0" type="radio" value="true">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-editor" contenteditable="true">Yes</span>
+						</span>
+					</label>
+				</div>
+			</fieldset>
 		</div>
-		<div class="sd-item" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" name="name_testid0" type="radio" value="true">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-editor" contenteditable="true">Yes</span>
-				</span>
-			</label>
-		</div>
-	</fieldset>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-radio-readonly.snap.html b/tests/markup/snapshots/boolean-radio-readonly.snap.html
index 6c0ccf7181..cfa64db5b3 100644
--- a/tests/markup/snapshots/boolean-radio-readonly.snap.html
+++ b/tests/markup/snapshots/boolean-radio-readonly.snap.html
@@ -1,32 +1,36 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
-	<fieldset class="sd-selectbase" role="presentation">
-		<div class="sd-item sd-item--readonly sd-radio--readonly" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" readonly="" type="radio" value="false">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">No</span>
-				</span>
-			</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
+			<fieldset class="sd-selectbase" role="presentation">
+				<div class="sd-item sd-item--readonly sd-radio--readonly" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" readonly="" type="radio" value="false">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">No</span>
+						</span>
+					</label>
+				</div>
+				<div class="sd-item sd-item--readonly sd-radio--readonly" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" readonly="" type="radio" value="true">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">Yes</span>
+						</span>
+					</label>
+				</div>
+			</fieldset>
 		</div>
-		<div class="sd-item sd-item--readonly sd-radio--readonly" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" readonly="" type="radio" value="true">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">Yes</span>
-				</span>
-			</label>
-		</div>
-	</fieldset>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-radio-v2.snap.html b/tests/markup/snapshots/boolean-radio-v2.snap.html
index afc7e8db3d..708d10ef19 100644
--- a/tests/markup/snapshots/boolean-radio-v2.snap.html
+++ b/tests/markup/snapshots/boolean-radio-v2.snap.html
@@ -1,32 +1,36 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
-	<fieldset class="sd-selectbase" role="presentation">
-		<div class="sd-item sd-item--checked sd-radio--checked" role="presentation">
-			<label class="sd-selectbase__label">
-				<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="false">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">No</span>
-				</span>
-			</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
+			<fieldset class="sd-selectbase" role="presentation">
+				<div class="sd-item sd-item--checked sd-radio--checked" role="presentation">
+					<label class="sd-selectbase__label">
+						<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="false">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">No</span>
+						</span>
+					</label>
+				</div>
+				<div class="sd-item" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="true">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">Yes</span>
+						</span>
+					</label>
+				</div>
+			</fieldset>
 		</div>
-		<div class="sd-item" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="true">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">Yes</span>
-				</span>
-			</label>
-		</div>
-	</fieldset>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-radio-values.snap.html b/tests/markup/snapshots/boolean-radio-values.snap.html
index b3668bc70e..36b0fe908f 100644
--- a/tests/markup/snapshots/boolean-radio-values.snap.html
+++ b/tests/markup/snapshots/boolean-radio-values.snap.html
@@ -1,32 +1,36 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
-	<fieldset class="sd-selectbase" role="presentation">
-		<div class="sd-item" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="false_val">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">No</span>
-				</span>
-			</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
+			<fieldset class="sd-selectbase" role="presentation">
+				<div class="sd-item" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="false_val">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">No</span>
+						</span>
+					</label>
+				</div>
+				<div class="sd-item sd-item--checked sd-radio--checked" role="presentation">
+					<label class="sd-selectbase__label">
+						<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="true_val">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">Yes</span>
+						</span>
+					</label>
+				</div>
+			</fieldset>
 		</div>
-		<div class="sd-item sd-item--checked sd-radio--checked" role="presentation">
-			<label class="sd-selectbase__label">
-				<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="true_val">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">Yes</span>
-				</span>
-			</label>
-		</div>
-	</fieldset>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-radio.snap.html b/tests/markup/snapshots/boolean-radio.snap.html
index c6b991945b..840ecc20b2 100644
--- a/tests/markup/snapshots/boolean-radio.snap.html
+++ b/tests/markup/snapshots/boolean-radio.snap.html
@@ -1,32 +1,36 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
-	<fieldset class="sd-selectbase" role="presentation">
-		<div class="sd-item" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="false">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">No</span>
-				</span>
-			</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
+			<fieldset class="sd-selectbase" role="presentation">
+				<div class="sd-item" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="false">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">No</span>
+						</span>
+					</label>
+				</div>
+				<div class="sd-item sd-item--checked sd-radio--checked" role="presentation">
+					<label class="sd-selectbase__label">
+						<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="true">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">Yes</span>
+						</span>
+					</label>
+				</div>
+			</fieldset>
 		</div>
-		<div class="sd-item sd-item--checked sd-radio--checked" role="presentation">
-			<label class="sd-selectbase__label">
-				<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="true">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">Yes</span>
-				</span>
-			</label>
-		</div>
-	</fieldset>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-readonly.snap.html b/tests/markup/snapshots/boolean-readonly.snap.html
index d80f288da6..1d5e4a9b34 100644
--- a/tests/markup/snapshots/boolean-readonly.snap.html
+++ b/tests/markup/snapshots/boolean-readonly.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
-	<label class="sd-boolean sd-boolean--allowhover sd-boolean--indeterminate sd-boolean--readonly">
-		<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" readonly="" role="switch" type="checkbox" value="">
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label sd-checkbox__label--readonly">
-				<span class="sv-string-viewer">No</span>
-			</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
+			<label class="sd-boolean sd-boolean--allowhover sd-boolean--indeterminate sd-boolean--readonly">
+				<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" readonly="" role="switch" type="checkbox" value="">
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label sd-checkbox__label--readonly">
+						<span class="sv-string-viewer">No</span>
+					</span>
+				</div>
+				<div class="sd-boolean__switch">
+					<span class="sd-boolean__thumb">
+					</span>
+				</div>
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label sd-checkbox__label--readonly">
+						<span class="sv-string-viewer">Yes</span>
+					</span>
+				</div>
+			</label>
 		</div>
-		<div class="sd-boolean__switch">
-			<span class="sd-boolean__thumb">
-			</span>
-		</div>
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label sd-checkbox__label--readonly">
-				<span class="sv-string-viewer">Yes</span>
-			</span>
-		</div>
-	</label>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-switch-value-false-readonly.snap.html b/tests/markup/snapshots/boolean-switch-value-false-readonly.snap.html
index f47e0f85eb..de1e805e90 100644
--- a/tests/markup/snapshots/boolean-switch-value-false-readonly.snap.html
+++ b/tests/markup/snapshots/boolean-switch-value-false-readonly.snap.html
@@ -1,13 +1,17 @@
-<div class="sd-boolean-switch">
-	<div aria-checked="false" aria-invalid="false" aria-label="q1" aria-required="false" class="sd-boolean-switch__button sd-boolean-switch__button--readonly" role="checkbox" tabindex="0">
-		<div class="sd-boolean-switch__thumb">
-			<div class="sd-boolean-switch__thumb-circle">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-boolean-switch">
+			<div aria-checked="false" aria-invalid="false" aria-label="q1" aria-required="false" class="sd-boolean-switch__button sd-boolean-switch__button--readonly" role="checkbox" tabindex="0">
+				<div class="sd-boolean-switch__thumb">
+					<div class="sd-boolean-switch__thumb-circle">
+					</div>
+				</div>
+			</div>
+			<div class="sd-boolean-switch__caption">
+				<div class="sd-boolean-switch__title" id="testid0_ariaTitle">
+					<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
+				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sd-boolean-switch__caption">
-		<div class="sd-boolean-switch__title" id="testid0_ariaTitle">
-			<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-switch-value-false.snap.html b/tests/markup/snapshots/boolean-switch-value-false.snap.html
index ff45e5d634..1ff9de2a2b 100644
--- a/tests/markup/snapshots/boolean-switch-value-false.snap.html
+++ b/tests/markup/snapshots/boolean-switch-value-false.snap.html
@@ -1,13 +1,17 @@
-<div class="sd-boolean-switch">
-	<div aria-checked="false" aria-invalid="false" aria-label="q1" aria-required="false" class="sd-boolean-switch__button" role="checkbox" tabindex="0">
-		<div class="sd-boolean-switch__thumb">
-			<div class="sd-boolean-switch__thumb-circle">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-boolean-switch">
+			<div aria-checked="false" aria-invalid="false" aria-label="q1" aria-required="false" class="sd-boolean-switch__button" role="checkbox" tabindex="0">
+				<div class="sd-boolean-switch__thumb">
+					<div class="sd-boolean-switch__thumb-circle">
+					</div>
+				</div>
+			</div>
+			<div class="sd-boolean-switch__caption">
+				<div class="sd-boolean-switch__title" id="testid0_ariaTitle">
+					<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
+				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sd-boolean-switch__caption">
-		<div class="sd-boolean-switch__title" id="testid0_ariaTitle">
-			<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-switch-value-true-readonly.snap.html b/tests/markup/snapshots/boolean-switch-value-true-readonly.snap.html
index a6d942675a..914cbf78b2 100644
--- a/tests/markup/snapshots/boolean-switch-value-true-readonly.snap.html
+++ b/tests/markup/snapshots/boolean-switch-value-true-readonly.snap.html
@@ -1,13 +1,17 @@
-<div class="sd-boolean-switch">
-	<div aria-checked="true" aria-invalid="false" aria-label="q1" aria-required="false" class="sd-boolean-switch__button sd-boolean-switch__button--checked sd-boolean-switch__button--readonly" role="checkbox" tabindex="0">
-		<div class="sd-boolean-switch__thumb">
-			<div class="sd-boolean-switch__thumb-circle">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-boolean-switch">
+			<div aria-checked="true" aria-invalid="false" aria-label="q1" aria-required="false" class="sd-boolean-switch__button sd-boolean-switch__button--checked sd-boolean-switch__button--readonly" role="checkbox" tabindex="0">
+				<div class="sd-boolean-switch__thumb">
+					<div class="sd-boolean-switch__thumb-circle">
+					</div>
+				</div>
+			</div>
+			<div class="sd-boolean-switch__caption">
+				<div class="sd-boolean-switch__title" id="testid0_ariaTitle">
+					<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
+				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sd-boolean-switch__caption">
-		<div class="sd-boolean-switch__title" id="testid0_ariaTitle">
-			<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-switch-value-true.snap.html b/tests/markup/snapshots/boolean-switch-value-true.snap.html
index cfad0422f1..3ae11bc30b 100644
--- a/tests/markup/snapshots/boolean-switch-value-true.snap.html
+++ b/tests/markup/snapshots/boolean-switch-value-true.snap.html
@@ -1,13 +1,17 @@
-<div class="sd-boolean-switch">
-	<div aria-checked="true" aria-invalid="false" aria-label="q1" aria-required="false" class="sd-boolean-switch__button sd-boolean-switch__button--checked" role="checkbox" tabindex="0">
-		<div class="sd-boolean-switch__thumb">
-			<div class="sd-boolean-switch__thumb-circle">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-boolean-switch">
+			<div aria-checked="true" aria-invalid="false" aria-label="q1" aria-required="false" class="sd-boolean-switch__button sd-boolean-switch__button--checked" role="checkbox" tabindex="0">
+				<div class="sd-boolean-switch__thumb">
+					<div class="sd-boolean-switch__thumb-circle">
+					</div>
+				</div>
+			</div>
+			<div class="sd-boolean-switch__caption">
+				<div class="sd-boolean-switch__title" id="testid0_ariaTitle">
+					<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
+				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sd-boolean-switch__caption">
-		<div class="sd-boolean-switch__title" id="testid0_ariaTitle">
-			<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-v2.snap.html b/tests/markup/snapshots/boolean-v2.snap.html
index 0e0a668d92..e58e703eab 100644
--- a/tests/markup/snapshots/boolean-v2.snap.html
+++ b/tests/markup/snapshots/boolean-v2.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
-	<label class="sd-boolean sd-boolean--allowhover sd-boolean--indeterminate">
-		<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" role="switch" type="checkbox" value="">
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label">
-				<span class="sv-string-viewer">No</span>
-			</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
+			<label class="sd-boolean sd-boolean--allowhover sd-boolean--indeterminate">
+				<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" role="switch" type="checkbox" value="">
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label">
+						<span class="sv-string-viewer">No</span>
+					</span>
+				</div>
+				<div class="sd-boolean__switch">
+					<span class="sd-boolean__thumb">
+					</span>
+				</div>
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label">
+						<span class="sv-string-viewer">Yes</span>
+					</span>
+				</div>
+			</label>
 		</div>
-		<div class="sd-boolean__switch">
-			<span class="sd-boolean__thumb">
-			</span>
-		</div>
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label">
-				<span class="sv-string-viewer">Yes</span>
-			</span>
-		</div>
-	</label>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-value-v2.snap.html b/tests/markup/snapshots/boolean-value-v2.snap.html
index 685c38732c..6f3697bcbd 100644
--- a/tests/markup/snapshots/boolean-value-v2.snap.html
+++ b/tests/markup/snapshots/boolean-value-v2.snap.html
@@ -1,22 +1,26 @@
-<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
-	<label class="sd-boolean sd-boolean--allowhover sd-boolean--checked">
-		<input aria-invalid="false" aria-label="Question title" aria-required="false" checked="" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" role="switch" type="checkbox" value="true">
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label sd-boolean__label--false sd-checkbox__label--disabled">
-				<span class="sv-string-viewer">No</span>
-			</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
+			<label class="sd-boolean sd-boolean--allowhover sd-boolean--checked">
+				<input aria-invalid="false" aria-label="Question title" aria-required="false" checked="" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" role="switch" type="checkbox" value="true">
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label sd-boolean__label--false sd-checkbox__label--disabled">
+						<span class="sv-string-viewer">No</span>
+					</span>
+				</div>
+				<div class="sd-boolean__switch">
+					<span class="sd-boolean__thumb">
+						<span class="sd-boolean__thumb-text">
+							<span class="sv-string-viewer">Yes</span>
+						</span>
+					</span>
+				</div>
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label sd-boolean__label--true">
+						<span class="sv-string-viewer">Yes</span>
+					</span>
+				</div>
+			</label>
 		</div>
-		<div class="sd-boolean__switch">
-			<span class="sd-boolean__thumb">
-				<span class="sd-boolean__thumb-text">
-					<span class="sv-string-viewer">Yes</span>
-				</span>
-			</span>
-		</div>
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label sd-boolean__label--true">
-				<span class="sv-string-viewer">Yes</span>
-			</span>
-		</div>
-	</label>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean.snap.html b/tests/markup/snapshots/boolean.snap.html
index 1238235bbe..59bd2615e2 100644
--- a/tests/markup/snapshots/boolean.snap.html
+++ b/tests/markup/snapshots/boolean.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
-	<label class="sd-boolean sd-boolean--allowhover sd-boolean--indeterminate">
-		<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" role="switch" type="checkbox" value="">
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label">
-				<span class="sv-string-viewer">No</span>
-			</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
+			<label class="sd-boolean sd-boolean--allowhover sd-boolean--indeterminate">
+				<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" role="switch" type="checkbox" value="">
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label">
+						<span class="sv-string-viewer">No</span>
+					</span>
+				</div>
+				<div class="sd-boolean__switch">
+					<span class="sd-boolean__thumb">
+					</span>
+				</div>
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label">
+						<span class="sv-string-viewer">Yes</span>
+					</span>
+				</div>
+			</label>
 		</div>
-		<div class="sd-boolean__switch">
-			<span class="sd-boolean__thumb">
-			</span>
-		</div>
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label">
-				<span class="sv-string-viewer">Yes</span>
-			</span>
-		</div>
-	</label>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/button-group-as-dropdown.snap.html b/tests/markup/snapshots/button-group-as-dropdown.snap.html
index ec75f5e0bb..1a54d42b46 100644
--- a/tests/markup/snapshots/button-group-as-dropdown.snap.html
+++ b/tests/markup/snapshots/button-group-as-dropdown.snap.html
@@ -1,52 +1,56 @@
-<div class="sd-button-group-scrollable-container sd-scrollable-container--compact sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="name" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<input autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" tabindex="-1" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-button-group-scrollable-container sd-scrollable-container--compact sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="name" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<input autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" tabindex="-1" type="text">
+						</div>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item1</span>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item2</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item3</span>
-											</div>
-										</li>
-									</ul>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item1</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item2</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item3</span>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/checkbox-columns-head-foot.snap.html b/tests/markup/snapshots/checkbox-columns-head-foot.snap.html
index e43a7c03ff..c9ed45e1e8 100644
--- a/tests/markup/snapshots/checkbox-columns-head-foot.snap.html
+++ b/tests/markup/snapshots/checkbox-columns-head-foot.snap.html
@@ -1,24 +1,58 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--selectall sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameselectall" type="checkbox" value="">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Select All</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-selectbase--multi-column">
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--selectall sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameselectall" type="checkbox" value="">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Select All</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-selectbase--multi-column">
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem1" type="checkbox" value="item1">
+							<span class="sd-checkbox__decorator sd-item__decorator">
+								<svg class="sd-checkbox__svg sd-item__svg">
+									<use xlink:href="#icon-check-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item1</span>
+							</span>
+						</label>
+					</div>
+				</div>
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem2" type="checkbox" value="item2">
+							<span class="sd-checkbox__decorator sd-item__decorator">
+								<svg class="sd-checkbox__svg sd-item__svg">
+									<use xlink:href="#icon-check-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item2</span>
+							</span>
+						</label>
+					</div>
+				</div>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--none sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
 				<label class="sd-selectbase__label">
-					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem1" type="checkbox" value="item1">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_3" name="namenone" type="checkbox" value="none">
 					<span class="sd-checkbox__decorator sd-item__decorator">
 						<svg class="sd-checkbox__svg sd-item__svg">
 							<use xlink:href="#icon-check-16x16" class="">
@@ -26,15 +60,13 @@
 						</svg>
 					</span>
 					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item1</span>
+						<span class="sv-string-viewer">None</span>
 					</span>
 				</label>
 			</div>
-		</div>
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
 			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
 				<label class="sd-selectbase__label">
-					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem2" type="checkbox" value="item2">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_4" name="nameother" type="checkbox" value="other">
 					<span class="sd-checkbox__decorator sd-item__decorator">
 						<svg class="sd-checkbox__svg sd-item__svg">
 							<use xlink:href="#icon-check-16x16" class="">
@@ -42,38 +74,10 @@
 						</svg>
 					</span>
 					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item2</span>
+						<span class="sv-string-viewer">Other (describe)</span>
 					</span>
 				</label>
 			</div>
-		</div>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--none sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_3" name="namenone" type="checkbox" value="none">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">None</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_4" name="nameother" type="checkbox" value="other">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-columns-mobile.snap.html b/tests/markup/snapshots/checkbox-columns-mobile.snap.html
index 2802ad13fe..85f220c1b9 100644
--- a/tests/markup/snapshots/checkbox-columns-mobile.snap.html
+++ b/tests/markup/snapshots/checkbox-columns-mobile.snap.html
@@ -1,45 +1,49 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase sd-selectbase--mobile" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase sd-selectbase--mobile" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem3" type="checkbox" value="item3">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem3" type="checkbox" value="item3">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-columns-no-head-foot.snap.html b/tests/markup/snapshots/checkbox-columns-no-head-foot.snap.html
index f79029082c..e587fa3311 100644
--- a/tests/markup/snapshots/checkbox-columns-no-head-foot.snap.html
+++ b/tests/markup/snapshots/checkbox-columns-no-head-foot.snap.html
@@ -1,79 +1,83 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-selectbase--multi-column">
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--selectall sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameselectall" type="checkbox" value="">
-					<span class="sd-checkbox__decorator sd-item__decorator">
-						<svg class="sd-checkbox__svg sd-item__svg">
-							<use xlink:href="#icon-check-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">Select All</span>
-					</span>
-				</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-selectbase--multi-column">
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--selectall sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameselectall" type="checkbox" value="">
+							<span class="sd-checkbox__decorator sd-item__decorator">
+								<svg class="sd-checkbox__svg sd-item__svg">
+									<use xlink:href="#icon-check-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">Select All</span>
+							</span>
+						</label>
+					</div>
+					<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem2" type="checkbox" value="item2">
+							<span class="sd-checkbox__decorator sd-item__decorator">
+								<svg class="sd-checkbox__svg sd-item__svg">
+									<use xlink:href="#icon-check-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item2</span>
+							</span>
+						</label>
+					</div>
+					<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_4" name="nameother" type="checkbox" value="other">
+							<span class="sd-checkbox__decorator sd-item__decorator">
+								<svg class="sd-checkbox__svg sd-item__svg">
+									<use xlink:href="#icon-check-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">Other (describe)</span>
+							</span>
+						</label>
+					</div>
+				</div>
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem1" type="checkbox" value="item1">
+							<span class="sd-checkbox__decorator sd-item__decorator">
+								<svg class="sd-checkbox__svg sd-item__svg">
+									<use xlink:href="#icon-check-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item1</span>
+							</span>
+						</label>
+					</div>
+					<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--none sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_3" name="namenone" type="checkbox" value="none">
+							<span class="sd-checkbox__decorator sd-item__decorator">
+								<svg class="sd-checkbox__svg sd-item__svg">
+									<use xlink:href="#icon-check-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">None</span>
+							</span>
+						</label>
+					</div>
+				</div>
 			</div>
-			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem2" type="checkbox" value="item2">
-					<span class="sd-checkbox__decorator sd-item__decorator">
-						<svg class="sd-checkbox__svg sd-item__svg">
-							<use xlink:href="#icon-check-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item2</span>
-					</span>
-				</label>
-			</div>
-			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_4" name="nameother" type="checkbox" value="other">
-					<span class="sd-checkbox__decorator sd-item__decorator">
-						<svg class="sd-checkbox__svg sd-item__svg">
-							<use xlink:href="#icon-check-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">Other (describe)</span>
-					</span>
-				</label>
-			</div>
-		</div>
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem1" type="checkbox" value="item1">
-					<span class="sd-checkbox__decorator sd-item__decorator">
-						<svg class="sd-checkbox__svg sd-item__svg">
-							<use xlink:href="#icon-check-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item1</span>
-					</span>
-				</label>
-			</div>
-			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--none sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_3" name="namenone" type="checkbox" value="none">
-					<span class="sd-checkbox__decorator sd-item__decorator">
-						<svg class="sd-checkbox__svg sd-item__svg">
-							<use xlink:href="#icon-check-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">None</span>
-					</span>
-				</label>
-			</div>
-		</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-columns.snap.html b/tests/markup/snapshots/checkbox-columns.snap.html
index 7137da38ad..35ff3f2094 100644
--- a/tests/markup/snapshots/checkbox-columns.snap.html
+++ b/tests/markup/snapshots/checkbox-columns.snap.html
@@ -1,37 +1,41 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-selectbase--multi-column">
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
-					<span class="sd-checkbox__decorator sd-item__decorator">
-						<svg class="sd-checkbox__svg sd-item__svg">
-							<use xlink:href="#icon-check-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item1</span>
-					</span>
-				</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-selectbase--multi-column">
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
+							<span class="sd-checkbox__decorator sd-item__decorator">
+								<svg class="sd-checkbox__svg sd-item__svg">
+									<use xlink:href="#icon-check-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item1</span>
+							</span>
+						</label>
+					</div>
+				</div>
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
+							<span class="sd-checkbox__decorator sd-item__decorator">
+								<svg class="sd-checkbox__svg sd-item__svg">
+									<use xlink:href="#icon-check-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item2</span>
+							</span>
+						</label>
+					</div>
+				</div>
 			</div>
-		</div>
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
-					<span class="sd-checkbox__decorator sd-item__decorator">
-						<svg class="sd-checkbox__svg sd-item__svg">
-							<use xlink:href="#icon-check-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item2</span>
-					</span>
-				</label>
-			</div>
-		</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-comment-V2.snap.html b/tests/markup/snapshots/checkbox-comment-V2.snap.html
index 6f7786f9fe..bd3b192cde 100644
--- a/tests/markup/snapshots/checkbox-comment-V2.snap.html
+++ b/tests/markup/snapshots/checkbox-comment-V2.snap.html
@@ -1,32 +1,36 @@
-<fieldset aria-invalid="false" aria-label="name" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">name</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
-<div class="sd-question__comment-area sd-question__form-group">
-	<div>
-		<span class="sv-string-viewer">Other (describe)</span>
-	</div>
-	<div class="sd-comment sd-formbox">
-		<textarea aria-label="name" class="sd-comment__input sd-formbox__input" id="testid0_comment" placeholder="" style="resize:none;">
-		</textarea>
-		<div class="sd-comment__grip">
-			<svg class="sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-grip" class="">
-				</use>
-			</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="name" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">name</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
+		<div class="sd-question__comment-area sd-question__form-group">
+			<div>
+				<span class="sv-string-viewer">Other (describe)</span>
+			</div>
+			<div class="sd-comment sd-formbox">
+				<textarea aria-label="name" class="sd-comment__input sd-formbox__input" id="testid0_comment" placeholder="" style="resize:none;">
+				</textarea>
+				<div class="sd-comment__grip">
+					<svg class="sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-grip" class="">
+						</use>
+					</svg>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-disabled.snap.html b/tests/markup/snapshots/checkbox-disabled.snap.html
index 59e1f34651..f9ef2d445a 100644
--- a/tests/markup/snapshots/checkbox-disabled.snap.html
+++ b/tests/markup/snapshots/checkbox-disabled.snap.html
@@ -1,45 +1,49 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-item sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" disabled="" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-editor" contenteditable="true">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-item sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" disabled="" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-editor" contenteditable="true">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-item sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" disabled="" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-editor" contenteditable="true">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-item sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" disabled="" id="testid0i_2" name="nameitem3" type="checkbox" value="item3">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-editor" contenteditable="true">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-checkbox sd-item sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" disabled="" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-editor" contenteditable="true">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-item sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" disabled="" id="testid0i_2" name="nameitem3" type="checkbox" value="item3">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-editor" contenteditable="true">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-modern.snap.html b/tests/markup/snapshots/checkbox-modern.snap.html
index a2c09e3f47..788964ca52 100644
--- a/tests/markup/snapshots/checkbox-modern.snap.html
+++ b/tests/markup/snapshots/checkbox-modern.snap.html
@@ -1,31 +1,35 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-multiple-comments.snap.html b/tests/markup/snapshots/checkbox-multiple-comments.snap.html
index 1928be5848..9eebcbc23c 100644
--- a/tests/markup/snapshots/checkbox-multiple-comments.snap.html
+++ b/tests/markup/snapshots/checkbox-multiple-comments.snap.html
@@ -1,69 +1,73 @@
-<fieldset aria-invalid="false" aria-label="name" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">name</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
-	</div>
-	<div class="form-group sd-question__comment-area sd-selectbase__other">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="name" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="name" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">name</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
 			</div>
-		</div>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem2" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="form-group sd-question__comment-area sd-selectbase__other">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="name" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+			<div class="form-group sd-question__comment-area sd-selectbase__other">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="name" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameother" type="checkbox" value="other">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem2" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="form-group sd-question__comment-area sd-selectbase__other">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="name" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameother" type="checkbox" value="other">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-other-V2.snap.html b/tests/markup/snapshots/checkbox-other-V2.snap.html
index 1e80234fc7..1962c3d52f 100644
--- a/tests/markup/snapshots/checkbox-other-V2.snap.html
+++ b/tests/markup/snapshots/checkbox-other-V2.snap.html
@@ -1,43 +1,47 @@
-<fieldset aria-invalid="false" aria-label="name" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">name</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameother" type="checkbox" value="other">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-	<div class="form-group sd-question__comment-area sd-selectbase__other">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="name" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="name" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">name</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameother" type="checkbox" value="other">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+			<div class="form-group sd-question__comment-area sd-selectbase__other">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="name" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
 			</div>
-		</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-other-maxlength.snap.html b/tests/markup/snapshots/checkbox-other-maxlength.snap.html
index 0ce964737b..3273b6b92c 100644
--- a/tests/markup/snapshots/checkbox-other-maxlength.snap.html
+++ b/tests/markup/snapshots/checkbox-other-maxlength.snap.html
@@ -1,29 +1,33 @@
-<fieldset aria-invalid="false" aria-label="name" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">name</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameother" type="checkbox" value="other">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-	<div class="form-group sd-question__comment-area sd-selectbase__other">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="name" class="sd-comment__input sd-formbox__input" maxlength="15" placeholder="" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="name" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">name</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameother" type="checkbox" value="other">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+			<div class="form-group sd-question__comment-area sd-selectbase__other">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="name" class="sd-comment__input sd-formbox__input" maxlength="15" placeholder="" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
 			</div>
-		</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-other.snap.html b/tests/markup/snapshots/checkbox-other.snap.html
index f1d2595c6e..0961dd82ec 100644
--- a/tests/markup/snapshots/checkbox-other.snap.html
+++ b/tests/markup/snapshots/checkbox-other.snap.html
@@ -1,71 +1,75 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem2" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem3" type="checkbox" value="item3">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameother" type="checkbox" value="other">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-	<div class="form-group sd-question__comment-area sd-selectbase__other">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="Question title" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem2" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem3" type="checkbox" value="item3">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameother" type="checkbox" value="other">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+			<div class="form-group sd-question__comment-area sd-selectbase__other">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="Question title" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
 			</div>
-		</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-readonly-selected.snap.html b/tests/markup/snapshots/checkbox-readonly-selected.snap.html
index e778fc8977..2a8dd03527 100644
--- a/tests/markup/snapshots/checkbox-readonly-selected.snap.html
+++ b/tests/markup/snapshots/checkbox-readonly-selected.snap.html
@@ -1,45 +1,49 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-checkbox--readonly sd-item sd-item--allowhover sd-item--checked sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" readonly="" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-checkbox--readonly sd-item sd-item--allowhover sd-item--checked sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" readonly="" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" readonly="" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem3" readonly="" type="checkbox" value="item3">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" readonly="" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem3" readonly="" type="checkbox" value="item3">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-readonly.snap.html b/tests/markup/snapshots/checkbox-readonly.snap.html
index 6d14e67368..bb23d2cb0d 100644
--- a/tests/markup/snapshots/checkbox-readonly.snap.html
+++ b/tests/markup/snapshots/checkbox-readonly.snap.html
@@ -1,45 +1,49 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" readonly="" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" readonly="" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" readonly="" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem3" readonly="" type="checkbox" value="item3">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" readonly="" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem3" readonly="" type="checkbox" value="item3">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-row-head-foot.snap.html b/tests/markup/snapshots/checkbox-row-head-foot.snap.html
index 43b5aedaae..64bb63d7aa 100644
--- a/tests/markup/snapshots/checkbox-row-head-foot.snap.html
+++ b/tests/markup/snapshots/checkbox-row-head-foot.snap.html
@@ -1,75 +1,79 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--selectall sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameselectall" type="checkbox" value="">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Select All</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--selectall sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameselectall" type="checkbox" value="">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Select All</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-selectbase--row">
+				<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem1" type="checkbox" value="item1">
+						<span class="sd-checkbox__decorator sd-item__decorator">
+							<svg class="sd-checkbox__svg sd-item__svg">
+								<use xlink:href="#icon-check-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">item1</span>
+						</span>
+					</label>
+				</div>
+				<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem2" type="checkbox" value="item2">
+						<span class="sd-checkbox__decorator sd-item__decorator">
+							<svg class="sd-checkbox__svg sd-item__svg">
+								<use xlink:href="#icon-check-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">item2</span>
+						</span>
+					</label>
+				</div>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--none sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_3" name="namenone" type="checkbox" value="none">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">None</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_4" name="nameother" type="checkbox" value="other">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-selectbase--row">
-		<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem1" type="checkbox" value="item1">
-				<span class="sd-checkbox__decorator sd-item__decorator">
-					<svg class="sd-checkbox__svg sd-item__svg">
-						<use xlink:href="#icon-check-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">item1</span>
-				</span>
-			</label>
-		</div>
-		<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem2" type="checkbox" value="item2">
-				<span class="sd-checkbox__decorator sd-item__decorator">
-					<svg class="sd-checkbox__svg sd-item__svg">
-						<use xlink:href="#icon-check-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">item2</span>
-				</span>
-			</label>
-		</div>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--none sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_3" name="namenone" type="checkbox" value="none">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">None</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_4" name="nameother" type="checkbox" value="other">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-row-no-head-foot.snap.html b/tests/markup/snapshots/checkbox-row-no-head-foot.snap.html
index 7067d254cc..574dc89631 100644
--- a/tests/markup/snapshots/checkbox-row-no-head-foot.snap.html
+++ b/tests/markup/snapshots/checkbox-row-no-head-foot.snap.html
@@ -1,73 +1,77 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase sd-selectbase--row" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--selectall sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameselectall" type="checkbox" value="">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Select All</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase sd-selectbase--row" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--selectall sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameselectall" type="checkbox" value="">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Select All</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem2" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--none sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_3" name="namenone" type="checkbox" value="none">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">None</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_4" name="nameother" type="checkbox" value="other">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem2" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--none sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_3" name="namenone" type="checkbox" value="none">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">None</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_4" name="nameother" type="checkbox" value="other">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-v2.snap.html b/tests/markup/snapshots/checkbox-v2.snap.html
index c37fc34f16..89e4f0e4ae 100644
--- a/tests/markup/snapshots/checkbox-v2.snap.html
+++ b/tests/markup/snapshots/checkbox-v2.snap.html
@@ -1,31 +1,35 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox.snap.html b/tests/markup/snapshots/checkbox.snap.html
index 8e7febeeec..b8685603db 100644
--- a/tests/markup/snapshots/checkbox.snap.html
+++ b/tests/markup/snapshots/checkbox.snap.html
@@ -1,45 +1,49 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem3" type="checkbox" value="item3">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem3" type="checkbox" value="item3">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/comment-allowResize.snap.html b/tests/markup/snapshots/comment-allowResize.snap.html
index 727b3e2f78..7f5bc6b33f 100644
--- a/tests/markup/snapshots/comment-allowResize.snap.html
+++ b/tests/markup/snapshots/comment-allowResize.snap.html
@@ -1,4 +1,8 @@
-<div class="sd-comment sd-formbox">
-	<textarea aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" cols="50" id="testid0i" placeholder="placeholder text" rows="4" style="resize:none;">
-	</textarea>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--comment" role="presentation">
+		<div class="sd-comment sd-formbox">
+			<textarea aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" cols="50" id="testid0i" placeholder="placeholder text" rows="4" style="resize:none;">
+			</textarea>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/comment-disabled.snap.html b/tests/markup/snapshots/comment-disabled.snap.html
index 9004ab1b9d..9ccf2ea9b3 100644
--- a/tests/markup/snapshots/comment-disabled.snap.html
+++ b/tests/markup/snapshots/comment-disabled.snap.html
@@ -1,10 +1,14 @@
-<div class="sd-comment sd-formbox">
-	<textarea aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" cols="50" disabled="" id="testid0i" placeholder="placeholder text" rows="4" style="resize:none;">
-	</textarea>
-	<div class="sd-comment__grip">
-		<svg class="sv-svg-icon" role="presentation">
-			<use xlink:href="#icon-grip" class="">
-			</use>
-		</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--comment" role="presentation">
+		<div class="sd-comment sd-formbox">
+			<textarea aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" cols="50" disabled="" id="testid0i" placeholder="placeholder text" rows="4" style="resize:none;">
+			</textarea>
+			<div class="sd-comment__grip">
+				<svg class="sv-svg-icon" role="presentation">
+					<use xlink:href="#icon-grip" class="">
+					</use>
+				</svg>
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/comment-div.snap.html b/tests/markup/snapshots/comment-div.snap.html
index 0f6a32d4e4..024b6ae4d9 100644
--- a/tests/markup/snapshots/comment-div.snap.html
+++ b/tests/markup/snapshots/comment-div.snap.html
@@ -1 +1,5 @@
-<div>val</div>
\ No newline at end of file
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--comment" role="presentation">
+		<div>val</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/comment-into-question-allowResize.snap.html b/tests/markup/snapshots/comment-into-question-allowResize.snap.html
index e2238da10a..ebc171c32f 100644
--- a/tests/markup/snapshots/comment-into-question-allowResize.snap.html
+++ b/tests/markup/snapshots/comment-into-question-allowResize.snap.html
@@ -1,64 +1,68 @@
-<fieldset aria-invalid="false" aria-label="name" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Item 1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="name" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Item 1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Item 2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 3">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Item 3</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-item--checked sd-radio sd-radio--allowhover sd-radio--checked sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="other">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+			<div class="form-group sd-question__comment-area sd-selectbase__other">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="name" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
+					</textarea>
+				</div>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Item 2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 3">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Item 3</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-item--checked sd-radio sd-radio--allowhover sd-radio--checked sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="other">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-	<div class="form-group sd-question__comment-area sd-selectbase__other">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="name" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
-			</textarea>
-		</div>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/comment-into-question-commentAreaRows.snap.html b/tests/markup/snapshots/comment-into-question-commentAreaRows.snap.html
index 049dc57d7b..1e2f61b6d5 100644
--- a/tests/markup/snapshots/comment-into-question-commentAreaRows.snap.html
+++ b/tests/markup/snapshots/comment-into-question-commentAreaRows.snap.html
@@ -1,85 +1,89 @@
-<fieldset aria-invalid="false" aria-label="name" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Item 1</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Item 2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 3">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Item 3</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-item--checked sd-radio sd-radio--allowhover sd-radio--checked sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="other">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-	<div class="form-group sd-question__comment-area sd-selectbase__other">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="name" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" rows="3" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="name" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Item 1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Item 2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 3">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Item 3</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-item--checked sd-radio sd-radio--allowhover sd-radio--checked sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="other">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+			<div class="form-group sd-question__comment-area sd-selectbase__other">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="name" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" rows="3" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
+			</div>
+		</fieldset>
+		<div class="sd-question__comment-area sd-question__form-group">
+			<div>
+				<span class="sv-string-viewer">Please leave a comment</span>
+			</div>
+			<div class="sd-comment sd-formbox">
+				<textarea aria-label="name" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" rows="3" style="resize:none;">
+				</textarea>
+				<div class="sd-comment__grip">
+					<svg class="sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-grip" class="">
+						</use>
+					</svg>
+				</div>
 			</div>
-		</div>
-	</div>
-</fieldset>
-<div class="sd-question__comment-area sd-question__form-group">
-	<div>
-		<span class="sv-string-viewer">Please leave a comment</span>
-	</div>
-	<div class="sd-comment sd-formbox">
-		<textarea aria-label="name" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" rows="3" style="resize:none;">
-		</textarea>
-		<div class="sd-comment__grip">
-			<svg class="sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-grip" class="">
-				</use>
-			</svg>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/comment-readonly.snap.html b/tests/markup/snapshots/comment-readonly.snap.html
index 93c34f71c6..69552da420 100644
--- a/tests/markup/snapshots/comment-readonly.snap.html
+++ b/tests/markup/snapshots/comment-readonly.snap.html
@@ -1,10 +1,14 @@
-<div class="sd-comment sd-formbox sd-formbox--readonly">
-	<textarea aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" cols="50" id="testid0i" readonly="" rows="4" style="resize:none;">
-	</textarea>
-	<div class="sd-comment__grip">
-		<svg class="sv-svg-icon" role="presentation">
-			<use xlink:href="#icon-grip" class="">
-			</use>
-		</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--comment" role="presentation">
+		<div class="sd-comment sd-formbox sd-formbox--readonly">
+			<textarea aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" cols="50" id="testid0i" readonly="" rows="4" style="resize:none;">
+			</textarea>
+			<div class="sd-comment__grip">
+				<svg class="sv-svg-icon" role="presentation">
+					<use xlink:href="#icon-grip" class="">
+					</use>
+				</svg>
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/comment.snap.html b/tests/markup/snapshots/comment.snap.html
index 7d2dd53f22..c739a5cb1c 100644
--- a/tests/markup/snapshots/comment.snap.html
+++ b/tests/markup/snapshots/comment.snap.html
@@ -1,10 +1,14 @@
-<div class="sd-comment sd-formbox">
-	<textarea aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" cols="50" id="testid0i" placeholder="placeholder text" rows="4" style="resize:none;">
-	</textarea>
-	<div class="sd-comment__grip">
-		<svg class="sv-svg-icon" role="presentation">
-			<use xlink:href="#icon-grip" class="">
-			</use>
-		</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--comment" role="presentation">
+		<div class="sd-comment sd-formbox">
+			<textarea aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" cols="50" id="testid0i" placeholder="placeholder text" rows="4" style="resize:none;">
+			</textarea>
+			<div class="sd-comment__grip">
+				<svg class="sv-svg-icon" role="presentation">
+					<use xlink:href="#icon-grip" class="">
+					</use>
+				</svg>
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/dropdown-aria-expanded.snap.html b/tests/markup/snapshots/dropdown-aria-expanded.snap.html
index 5f7430d526..4d0e12c526 100644
--- a/tests/markup/snapshots/dropdown-aria-expanded.snap.html
+++ b/tests/markup/snapshots/dropdown-aria-expanded.snap.html
@@ -1,52 +1,56 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<input aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<input aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+						</div>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item1</span>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item2</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item3</span>
-											</div>
-										</li>
-									</ul>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item1</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item2</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item3</span>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/dropdown-disabled-with-value.snap.html b/tests/markup/snapshots/dropdown-disabled-with-value.snap.html
index 2c067e959c..827b8aa7b3 100644
--- a/tests/markup/snapshots/dropdown-disabled-with-value.snap.html
+++ b/tests/markup/snapshots/dropdown-disabled-with-value.snap.html
@@ -1,32 +1,36 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-formbox" disabled="" id="testid0i" role="combobox">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<span class="sv-string-editor" contenteditable="true">item1</span>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-clean-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Clear" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-cancel-24x24" class="">
-								</use>
-								<title class="">Clear</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-formbox" disabled="" id="testid0i" role="combobox">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<span class="sv-string-editor" contenteditable="true">item1</span>
+						</div>
 					</div>
-				</div>
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-clean-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Clear" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-cancel-24x24" class="">
+										</use>
+										<title class="">Clear</title>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/dropdown-disabled-without-value.snap.html b/tests/markup/snapshots/dropdown-disabled-without-value.snap.html
index b06ee9904a..a91cad24a9 100644
--- a/tests/markup/snapshots/dropdown-disabled-without-value.snap.html
+++ b/tests/markup/snapshots/dropdown-disabled-without-value.snap.html
@@ -1,21 +1,25 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" disabled="" id="testid0i" role="combobox">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<input autocomplete="off" class="sd-dropdown__filter-string-input" disabled="" id="testid0i_0" inputmode="text" placeholder="Select..." readonly="" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" disabled="" id="testid0i" role="combobox">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<input autocomplete="off" class="sd-dropdown__filter-string-input" disabled="" id="testid0i_0" inputmode="text" placeholder="Select..." readonly="" type="text">
+						</div>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/dropdown-input-focused.snap.html b/tests/markup/snapshots/dropdown-input-focused.snap.html
index d5a12b916e..eab1870862 100644
--- a/tests/markup/snapshots/dropdown-input-focused.snap.html
+++ b/tests/markup/snapshots/dropdown-input-focused.snap.html
@@ -1,34 +1,38 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." role="combobox" type="text">
+						</div>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/dropdown-input-string.snap.html b/tests/markup/snapshots/dropdown-input-string.snap.html
index 6f562737b0..a9ec0ed0ad 100644
--- a/tests/markup/snapshots/dropdown-input-string.snap.html
+++ b/tests/markup/snapshots/dropdown-input-string.snap.html
@@ -1,59 +1,63 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__hint-prefix">
-					<span>F</span>
-				</div>
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<div class="sd-dropdown__hint-suffix">
-						<span style="visibility:hidden;">o</span>
-						<span>rd</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__hint-prefix">
+							<span>F</span>
+						</div>
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<div class="sd-dropdown__hint-suffix">
+								<span style="visibility:hidden;">o</span>
+								<span>rd</span>
+							</div>
+							<input aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
+						</div>
 					</div>
-					<input aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist sd-selectlist--filtering" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item--focused sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">Ford</span>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" style="display:none;" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">Vauxhall</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">Volkswagen</span>
-											</div>
-										</li>
-									</ul>
+											<ul class="sd-selectlist sd-selectlist--filtering" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item--focused sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">Ford</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" style="display:none;" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">Vauxhall</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">Volkswagen</span>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/dropdown-other.snap.html b/tests/markup/snapshots/dropdown-other.snap.html
index 0e41bf4f12..b3286d898e 100644
--- a/tests/markup/snapshots/dropdown-other.snap.html
+++ b/tests/markup/snapshots/dropdown-other.snap.html
@@ -1,36 +1,40 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--select sd-formbox">
-			<select aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown__input sd-formbox__input">
-				<option value="">Select...</option>
-				<option value="item1">item1</option>
-				<option value="item2">item2</option>
-				<option value="item3">item3</option>
-				<option value="other">Other (describe)</option>
-			</select>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--select sd-formbox">
+					<select aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown__input sd-formbox__input">
+						<option value="">Select...</option>
+						<option value="item1">item1</option>
+						<option value="item2">item2</option>
+						<option value="item3">item3</option>
+						<option value="other">Other (describe)</option>
+					</select>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
-	</div>
-	<div class="form-group sd-question__comment-area">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+			<div class="form-group sd-question__comment-area">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/dropdown-readonly-with-value.snap.html b/tests/markup/snapshots/dropdown-readonly-with-value.snap.html
index 008dadd34d..b26e169f30 100644
--- a/tests/markup/snapshots/dropdown-readonly-with-value.snap.html
+++ b/tests/markup/snapshots/dropdown-readonly-with-value.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-formbox sd-formbox--readonly" id="testid0i" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<span class="sv-string-viewer">item1</span>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-formbox sd-formbox--readonly" id="testid0i" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<span class="sv-string-viewer">item1</span>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/dropdown-readonly.snap.html b/tests/markup/snapshots/dropdown-readonly.snap.html
index c1a48be6fe..e702d8d55c 100644
--- a/tests/markup/snapshots/dropdown-readonly.snap.html
+++ b/tests/markup/snapshots/dropdown-readonly.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--readonly" id="testid0i" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<span class="sv-string-viewer">Select...</span>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--readonly" id="testid0i" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<span class="sv-string-viewer">Select...</span>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/dropdown-renderAs-select-readonly-selected.snap.html b/tests/markup/snapshots/dropdown-renderAs-select-readonly-selected.snap.html
index cb487af5fe..5f5bbdb4cc 100644
--- a/tests/markup/snapshots/dropdown-renderAs-select-readonly-selected.snap.html
+++ b/tests/markup/snapshots/dropdown-renderAs-select-readonly-selected.snap.html
@@ -1,16 +1,20 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--select sd-formbox sd-formbox--readonly">
-			<div class="sd-dropdown sd-dropdown--select sd-formbox sd-formbox--readonly" disabled="" id="testid0i">item1</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--select sd-formbox sd-formbox--readonly">
+					<div class="sd-dropdown sd-dropdown--select sd-formbox sd-formbox--readonly" disabled="" id="testid0i">item1</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/dropdown-renderAs-select-readonly.snap.html b/tests/markup/snapshots/dropdown-renderAs-select-readonly.snap.html
index cb8cb80a84..e184b26953 100644
--- a/tests/markup/snapshots/dropdown-renderAs-select-readonly.snap.html
+++ b/tests/markup/snapshots/dropdown-renderAs-select-readonly.snap.html
@@ -1,16 +1,20 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-dropdown--select sd-formbox sd-formbox--readonly">
-			<div class="sd-dropdown sd-dropdown--empty sd-dropdown--select sd-formbox sd-formbox--readonly" disabled="" id="testid0i">Select...</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-dropdown--select sd-formbox sd-formbox--readonly">
+					<div class="sd-dropdown sd-dropdown--empty sd-dropdown--select sd-formbox sd-formbox--readonly" disabled="" id="testid0i">Select...</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/dropdown-select-clear-button.snap.html b/tests/markup/snapshots/dropdown-select-clear-button.snap.html
index fc7ecc1616..b4192f737e 100644
--- a/tests/markup/snapshots/dropdown-select-clear-button.snap.html
+++ b/tests/markup/snapshots/dropdown-select-clear-button.snap.html
@@ -1,46 +1,50 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-formbox" id="testid0i">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<span class="sv-string-viewer">item1</span>
-					<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-clean-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-cancel-24x24" class="">
-								</use>
-								<title class="">Clear</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-formbox" id="testid0i">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<span class="sv-string-viewer">item1</span>
+							<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
+						</div>
 					</div>
-				</div>
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-clean-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-cancel-24x24" class="">
+										</use>
+										<title class="">Clear</title>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/dropdown-select-mobile.snap.html b/tests/markup/snapshots/dropdown-select-mobile.snap.html
index 8f854adde7..a9c17b3801 100644
--- a/tests/markup/snapshots/dropdown-select-mobile.snap.html
+++ b/tests/markup/snapshots/dropdown-select-mobile.snap.html
@@ -1,56 +1,60 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0i">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="none" placeholder="Select..." readonly="" role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0i">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="none" placeholder="Select..." readonly="" role="combobox" type="text">
+						</div>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-tablet sv-single-select-list" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__filter">
-										<div class="sd-selectlist-filter__box">
-											<div class="sd-selectlist__filter-icon">
-												<svg class="sv-svg-icon" role="presentation">
-													<use xlink:href="#icon-search-24x24" class="">
-													</use>
-												</svg>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-tablet sv-single-select-list" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__filter">
+												<div class="sd-selectlist-filter__box">
+													<div class="sd-selectlist__filter-icon">
+														<svg class="sv-svg-icon" role="presentation">
+															<use xlink:href="#icon-search-24x24" class="">
+															</use>
+														</svg>
+													</div>
+													<input aria-label="Type to search..." class="sd-selectlist__input" placeholder="Type to search..." type="text">
+												</div>
+											</div>
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-											<input aria-label="Type to search..." class="sd-selectlist__input" placeholder="Type to search..." type="text" value="">
 										</div>
 									</div>
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
 								</div>
-							</div>
-						</div>
-						<div class="sv-popup__body-footer">
-							<div class="sd-action-bar sd-action-bar--default-size sv-menu-footer-action-bar">
-								<div class="sd-action-bar__item">
-									<div class="sd-action-bar__item-content">
-										<button class="sd-action sd-action--brand sd-action--small sd-action--tertiary sv-popup__button sv-popup__button--cancel" role="button" tabindex="0" type="button">
-											<span class="sd-action__title">Cancel</span>
-										</button>
+								<div class="sv-popup__body-footer">
+									<div class="sd-action-bar sd-action-bar--default-size sv-menu-footer-action-bar">
+										<div class="sd-action-bar__item">
+											<div class="sd-action-bar__item-content">
+												<button class="sd-action sd-action--brand sd-action--small sd-action--tertiary sv-popup__button sv-popup__button--cancel" role="button" tabindex="0" type="button">
+													<span class="sd-action__title">Cancel</span>
+												</button>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/dropdown-select.snap.html b/tests/markup/snapshots/dropdown-select.snap.html
index 841efedab6..c4efbd4437 100644
--- a/tests/markup/snapshots/dropdown-select.snap.html
+++ b/tests/markup/snapshots/dropdown-select.snap.html
@@ -1,34 +1,38 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0i">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0i">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+						</div>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/dropdown-show.snap.html b/tests/markup/snapshots/dropdown-show.snap.html
index b03061ff21..3a2a146df1 100644
--- a/tests/markup/snapshots/dropdown-show.snap.html
+++ b/tests/markup/snapshots/dropdown-show.snap.html
@@ -1,20 +1,24 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-dropdown--select sd-formbox">
-			<select aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown__input sd-formbox__input" id="testid0i">
-				<option value="item1">item1</option>
-				<option value="item2">item2</option>
-				<option value="item3">item3</option>
-			</select>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-dropdown--select sd-formbox">
+					<select aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown__input sd-formbox__input" id="testid0i">
+						<option value="item1">item1</option>
+						<option value="item2">item2</option>
+						<option value="item3">item3</option>
+					</select>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/dropdown-with-markdown.snap.html b/tests/markup/snapshots/dropdown-with-markdown.snap.html
index 3ff7922cb3..ea1f31e05a 100644
--- a/tests/markup/snapshots/dropdown-with-markdown.snap.html
+++ b/tests/markup/snapshots/dropdown-with-markdown.snap.html
@@ -1,46 +1,50 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-formbox" id="testid0i">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<span class="sv-string-viewer">Cat: ![A cat](https://surveyjs.io/Content/Images/examples/markdown/cat.svg =14x14)</span>
-					<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-clean-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-cancel-24x24" class="">
-								</use>
-								<title class="">Clear</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-formbox" id="testid0i">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<span class="sv-string-viewer">Cat: ![A cat](https://surveyjs.io/Content/Images/examples/markdown/cat.svg =14x14)</span>
+							<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
+						</div>
 					</div>
-				</div>
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-clean-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-cancel-24x24" class="">
+										</use>
+										<title class="">Clear</title>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/dropdown-with-none-value.snap.html b/tests/markup/snapshots/dropdown-with-none-value.snap.html
index c8a96c53d5..77e6a25ab7 100644
--- a/tests/markup/snapshots/dropdown-with-none-value.snap.html
+++ b/tests/markup/snapshots/dropdown-with-none-value.snap.html
@@ -1,46 +1,50 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-formbox" id="testid0i">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<span class="sv-string-viewer">None</span>
-					<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-clean-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-cancel-24x24" class="">
-								</use>
-								<title class="">Clear</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-formbox" id="testid0i">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<span class="sv-string-viewer">None</span>
+							<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
+						</div>
 					</div>
-				</div>
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-clean-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-cancel-24x24" class="">
+										</use>
+										<title class="">Clear</title>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/dropdown-with-other-value.snap.html b/tests/markup/snapshots/dropdown-with-other-value.snap.html
index b25d5950c9..71af198c60 100644
--- a/tests/markup/snapshots/dropdown-with-other-value.snap.html
+++ b/tests/markup/snapshots/dropdown-with-other-value.snap.html
@@ -1,46 +1,50 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-formbox">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<span class="sv-string-viewer">Other (describe)</span>
-					<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-clean-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-cancel-24x24" class="">
-								</use>
-								<title class="">Clear</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-formbox">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<span class="sv-string-viewer">Other (describe)</span>
+							<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
+						</div>
 					</div>
-				</div>
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-clean-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-cancel-24x24" class="">
+										</use>
+										<title class="">Clear</title>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
@@ -48,17 +52,17 @@
 					</div>
 				</div>
 			</div>
-		</div>
-	</div>
-	<div class="form-group sd-question__comment-area">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+			<div class="form-group sd-question__comment-area">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/dropdown-without-textWrapEnabled.snap.html b/tests/markup/snapshots/dropdown-without-textWrapEnabled.snap.html
index 1228e47101..de1132fb1d 100644
--- a/tests/markup/snapshots/dropdown-without-textWrapEnabled.snap.html
+++ b/tests/markup/snapshots/dropdown-without-textWrapEnabled.snap.html
@@ -1,59 +1,63 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__hint-prefix">
-					<span>F</span>
-				</div>
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<div class="sd-dropdown__hint-suffix">
-						<span style="visibility:hidden;">o</span>
-						<span>rd</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__hint-prefix">
+							<span>F</span>
+						</div>
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<div class="sd-dropdown__hint-suffix">
+								<span style="visibility:hidden;">o</span>
+								<span>rd</span>
+							</div>
+							<input aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
+						</div>
 					</div>
-					<input aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist sd-selectlist--filtering" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item--focused" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">Ford</span>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" style="display:none;" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">Vauxhall</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">Volkswagen</span>
-											</div>
-										</li>
-									</ul>
+											<ul class="sd-selectlist sd-selectlist--filtering" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item--focused" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">Ford</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" style="display:none;" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">Vauxhall</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">Volkswagen</span>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/dropdown.snap.html b/tests/markup/snapshots/dropdown.snap.html
index dc29a5836d..05bb4b58dc 100644
--- a/tests/markup/snapshots/dropdown.snap.html
+++ b/tests/markup/snapshots/dropdown.snap.html
@@ -1,21 +1,25 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-dropdown--select sd-formbox">
-			<select aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown__input sd-formbox__input" id="testid0i">
-				<option value="">Select...</option>
-				<option value="item1">item1</option>
-				<option value="item2">item2</option>
-				<option value="item3">item3</option>
-			</select>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-dropdown--select sd-formbox">
+					<select aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown__input sd-formbox__input" id="testid0i">
+						<option value="">Select...</option>
+						<option value="item1">item1</option>
+						<option value="item2">item2</option>
+						<option value="item3">item3</option>
+					</select>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/expression.snap.html b/tests/markup/snapshots/expression.snap.html
index 3da1545e75..83f419c3e3 100644
--- a/tests/markup/snapshots/expression.snap.html
+++ b/tests/markup/snapshots/expression.snap.html
@@ -1 +1,5 @@
-<div aria-label="123" aria-live="polite" class="sd-expression">123</div>
\ No newline at end of file
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div aria-label="123" aria-live="polite" class="sd-expression">123</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/file-2-png.snap.html b/tests/markup/snapshots/file-2-png.snap.html
index f7dab49a8d..15dbef4395 100644
--- a/tests/markup/snapshots/file-2-png.snap.html
+++ b/tests/markup/snapshots/file-2-png.snap.html
@@ -1,55 +1,59 @@
-<div class="sd-file sd-file--answered sd-file--single sd-file--single-image">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Replace file</title>
-								</svg>
-							</label>
-						</div>
-					</div>
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
-									</use>
-									<title class="">Clear</title>
-								</svg>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper">
-						<img alt="File preview" src="#item1.png">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered sd-file--single sd-file--single-image">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
 							<div class="sd-action-bar__item">
 								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+									<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
 										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-close-16x16" class="">
+											<use xlink:href="#icon-folder-24x24" class="">
 											</use>
-											<title class="">Remove this file</title>
+											<title class="">Replace file</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
 										</svg>
 									</button>
 								</div>
 							</div>
 						</div>
-						<div class="sd-file__sign">
-							<a download="item1.png" href="#item1.png" rel="noreferrer" target="_blank" title="item1.png">item1.png</a>
+					</div>
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper">
+								<img alt="File preview" src="#item1.png">
+									<div class="sd-action-bar__item">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-close-16x16" class="">
+													</use>
+													<title class="">Remove this file</title>
+												</svg>
+											</button>
+										</div>
+									</div>
+								</div>
+								<div class="sd-file__sign">
+									<a download="item1.png" href="#item1.png" rel="noreferrer" target="_blank" title="item1.png">item1.png</a>
+								</div>
+							</span>
 						</div>
-					</span>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/file-2-zip-png-file-navigator.snap.html b/tests/markup/snapshots/file-2-zip-png-file-navigator.snap.html
index 22fce4790a..5ae8cb6053 100644
--- a/tests/markup/snapshots/file-2-zip-png-file-navigator.snap.html
+++ b/tests/markup/snapshots/file-2-zip-png-file-navigator.snap.html
@@ -1,86 +1,90 @@
-<div class="sd-file sd-file--answered">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" multiple="" tabindex="-1" title=" " type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Select File" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" multiple="" tabindex="-1" title=" " type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Select File" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Select File</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
+										</svg>
+									</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
+								<svg class="sd-file__default-image sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-file-72x72" class="">
 									</use>
-									<title class="">Select File</title>
 								</svg>
-							</label>
-						</div>
+								<div class="sd-action-bar__item">
+									<div class="sd-action-bar__item-content">
+										<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+											<svg class="sd-action__icon sv-svg-icon" role="presentation">
+												<use xlink:href="#icon-close-16x16" class="">
+												</use>
+												<title class="">Remove this file</title>
+											</svg>
+										</button>
+									</div>
+								</div>
+							</div>
+							<div class="sd-file__sign">
+								<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							</div>
+						</span>
 					</div>
+				</div>
+				<div class="sd-action-bar sd-action-bar--default-size">
 					<div class="sd-action-bar__item">
 						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
+							<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
+									<use xlink:href="#icon-arrowleft-16x16" class="">
 									</use>
-									<title class="">Clear</title>
 								</svg>
 							</button>
 						</div>
 					</div>
-				</div>
-			</div>
-		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
-						<svg class="sd-file__default-image sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-file-72x72" class="">
-							</use>
-						</svg>
-						<div class="sd-action-bar__item">
-							<div class="sd-action-bar__item-content">
-								<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
-									<svg class="sd-action__icon sv-svg-icon" role="presentation">
-										<use xlink:href="#icon-close-16x16" class="">
-										</use>
-										<title class="">Remove this file</title>
-									</svg>
-								</button>
-							</div>
+					<div class="sd-action-bar__item sv-action--file-index">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" type="button">
+								<span class="sd-action__title">1 of 2</span>
+							</button>
 						</div>
 					</div>
-					<div class="sd-file__sign">
-						<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
+									<use xlink:href="#icon-arrowright-16x16" class="">
+									</use>
+								</svg>
+							</button>
+						</div>
 					</div>
-				</span>
-			</div>
-		</div>
-		<div class="sd-action-bar sd-action-bar--default-size">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
-							<use xlink:href="#icon-arrowleft-16x16" class="">
-							</use>
-						</svg>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item sv-action--file-index">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" type="button">
-						<span class="sd-action__title">1 of 2</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
-							<use xlink:href="#icon-arrowright-16x16" class="">
-							</use>
-						</svg>
-					</button>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/file-2-zip-png-ro.snap.html b/tests/markup/snapshots/file-2-zip-png-ro.snap.html
index 693f090b1b..8559d736c1 100644
--- a/tests/markup/snapshots/file-2-zip-png-ro.snap.html
+++ b/tests/markup/snapshots/file-2-zip-png-ro.snap.html
@@ -1,56 +1,60 @@
-<div class="sd-file sd-file--answered sd-file--readonly">
-	<input class="form-control sd-visuallyhidden" id="testid0i" multiple="" placeholder="Question title" readonly="" style="color:transparent;" type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Select File" class="sd-action sd-action--brand sd-action--disabled sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Select File</title>
-								</svg>
-							</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered sd-file--readonly">
+			<input class="form-control sd-visuallyhidden" id="testid0i" multiple="" placeholder="Question title" readonly="" style="color:transparent;" type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Select File" class="sd-action sd-action--brand sd-action--disabled sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Select File</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
+										</svg>
+									</button>
+								</div>
+							</div>
 						</div>
 					</div>
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
+								<svg class="sd-file__default-image sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-file-72x72" class="">
 									</use>
-									<title class="">Clear</title>
 								</svg>
-							</button>
+							</div>
+							<div class="sd-file__sign">
+								<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							</div>
+						</span>
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper">
+								<img alt="File preview" src="#item2.png">
+								</div>
+								<div class="sd-file__sign">
+									<a download="item2.png" href="#item2.png" rel="noreferrer" target="_blank" title="item2.png">item2.png</a>
+								</div>
+							</span>
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
-						<svg class="sd-file__default-image sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-file-72x72" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-file__sign">
-						<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
-					</div>
-				</span>
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper">
-						<img alt="File preview" src="#item2.png">
-						</div>
-						<div class="sd-file__sign">
-							<a download="item2.png" href="#item2.png" rel="noreferrer" target="_blank" title="item2.png">item2.png</a>
-						</div>
-					</span>
-				</div>
-			</div>
-		</div>
 	</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/file-2-zip-png.snap.html b/tests/markup/snapshots/file-2-zip-png.snap.html
index b70d70a466..671be37c18 100644
--- a/tests/markup/snapshots/file-2-zip-png.snap.html
+++ b/tests/markup/snapshots/file-2-zip-png.snap.html
@@ -1,77 +1,81 @@
-<div class="sd-file sd-file--answered">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" multiple="" tabindex="-1" title=" " type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Select File" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Select File</title>
-								</svg>
-							</label>
-						</div>
-					</div>
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
-									</use>
-									<title class="">Clear</title>
-								</svg>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
-						<svg class="sd-file__default-image sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-file-72x72" class="">
-							</use>
-						</svg>
-						<div class="sd-action-bar__item">
-							<div class="sd-action-bar__item-content">
-								<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
-									<svg class="sd-action__icon sv-svg-icon" role="presentation">
-										<use xlink:href="#icon-close-16x16" class="">
-										</use>
-										<title class="">Remove this file</title>
-									</svg>
-								</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" multiple="" tabindex="-1" title=" " type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Select File" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Select File</title>
+										</svg>
+									</label>
+								</div>
 							</div>
-						</div>
-					</div>
-					<div class="sd-file__sign">
-						<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
-					</div>
-				</span>
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper">
-						<img alt="File preview" src="#item2.png">
 							<div class="sd-action-bar__item">
 								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
 										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-close-16x16" class="">
+											<use xlink:href="#icon-clear-24x24" class="">
 											</use>
-											<title class="">Remove this file</title>
+											<title class="">Clear</title>
 										</svg>
 									</button>
 								</div>
 							</div>
 						</div>
-						<div class="sd-file__sign">
-							<a download="item2.png" href="#item2.png" rel="noreferrer" target="_blank" title="item2.png">item2.png</a>
+					</div>
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
+								<svg class="sd-file__default-image sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-file-72x72" class="">
+									</use>
+								</svg>
+								<div class="sd-action-bar__item">
+									<div class="sd-action-bar__item-content">
+										<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+											<svg class="sd-action__icon sv-svg-icon" role="presentation">
+												<use xlink:href="#icon-close-16x16" class="">
+												</use>
+												<title class="">Remove this file</title>
+											</svg>
+										</button>
+									</div>
+								</div>
+							</div>
+							<div class="sd-file__sign">
+								<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							</div>
+						</span>
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper">
+								<img alt="File preview" src="#item2.png">
+									<div class="sd-action-bar__item">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-close-16x16" class="">
+													</use>
+													<title class="">Remove this file</title>
+												</svg>
+											</button>
+										</div>
+									</div>
+								</div>
+								<div class="sd-file__sign">
+									<a download="item2.png" href="#item2.png" rel="noreferrer" target="_blank" title="item2.png">item2.png</a>
+								</div>
+							</span>
 						</div>
-					</span>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/file-2-zip.snap.html b/tests/markup/snapshots/file-2-zip.snap.html
index ad53b32707..6992270eda 100644
--- a/tests/markup/snapshots/file-2-zip.snap.html
+++ b/tests/markup/snapshots/file-2-zip.snap.html
@@ -1,58 +1,62 @@
-<div class="sd-file sd-file--answered sd-file--single">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Replace file</title>
-								</svg>
-							</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered sd-file--single">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Replace file</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
+										</svg>
+									</button>
+								</div>
+							</div>
 						</div>
 					</div>
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
+								<svg class="sd-file__default-image sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-file-72x72" class="">
 									</use>
-									<title class="">Clear</title>
 								</svg>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
-						<svg class="sd-file__default-image sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-file-72x72" class="">
-							</use>
-						</svg>
-						<div class="sd-action-bar__item">
-							<div class="sd-action-bar__item-content">
-								<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
-									<svg class="sd-action__icon sv-svg-icon" role="presentation">
-										<use xlink:href="#icon-close-16x16" class="">
-										</use>
-										<title class="">Remove this file</title>
-									</svg>
-								</button>
+								<div class="sd-action-bar__item">
+									<div class="sd-action-bar__item-content">
+										<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+											<svg class="sd-action__icon sv-svg-icon" role="presentation">
+												<use xlink:href="#icon-close-16x16" class="">
+												</use>
+												<title class="">Remove this file</title>
+											</svg>
+										</button>
+									</div>
+								</div>
 							</div>
-						</div>
-					</div>
-					<div class="sd-file__sign">
-						<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							<div class="sd-file__sign">
+								<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							</div>
+						</span>
 					</div>
-				</span>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/file-2.snap.html b/tests/markup/snapshots/file-2.snap.html
index c5fdff7756..e0360b08a1 100644
--- a/tests/markup/snapshots/file-2.snap.html
+++ b/tests/markup/snapshots/file-2.snap.html
@@ -1,22 +1,26 @@
-<div class="sd-file sd-file--single">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Choose file(s)..." type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<span class="sd-file__drag-area-placeholder">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Drag and drop a file here or click the button below to select a file to upload.</span>
-			</span>
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Select File" class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Select File</title>
-								</svg>
-								<span class="sd-action__title">Select File</span>
-							</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--single">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Choose file(s)..." type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<span class="sd-file__drag-area-placeholder">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Drag and drop a file here or click the button below to select a file to upload.</span>
+					</span>
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Select File" class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Select File</title>
+										</svg>
+										<span class="sd-action__title">Select File</span>
+									</label>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/file-camera.snap.html b/tests/markup/snapshots/file-camera.snap.html
index e28c410363..a7b4dcd8b8 100644
--- a/tests/markup/snapshots/file-camera.snap.html
+++ b/tests/markup/snapshots/file-camera.snap.html
@@ -1,22 +1,26 @@
-<div class="sd-file sd-file--single">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" capture="user" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Choose file(s)..." type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<span class="sd-file__drag-area-placeholder">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Drag and drop a file here or click the button below to select a file to upload.</span>
-			</span>
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Select File" class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Select File</title>
-								</svg>
-								<span class="sd-action__title">Select File</span>
-							</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--single">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" capture="user" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Choose file(s)..." type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<span class="sd-file__drag-area-placeholder">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Drag and drop a file here or click the button below to select a file to upload.</span>
+					</span>
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Select File" class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Select File</title>
+										</svg>
+										<span class="sd-action__title">Select File</span>
+									</label>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/file-image-size.snap.html b/tests/markup/snapshots/file-image-size.snap.html
index 6ac49ff75a..a4c2a7e80a 100644
--- a/tests/markup/snapshots/file-image-size.snap.html
+++ b/tests/markup/snapshots/file-image-size.snap.html
@@ -1,55 +1,59 @@
-<div class="sd-file sd-file--answered sd-file--single sd-file--single-image">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Replace file</title>
-								</svg>
-							</label>
-						</div>
-					</div>
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
-									</use>
-									<title class="">Clear</title>
-								</svg>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper">
-						<img alt="File preview" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6L" style="height:250px; width:350px;">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered sd-file--single sd-file--single-image">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
 							<div class="sd-action-bar__item">
 								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+									<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
 										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-close-16x16" class="">
+											<use xlink:href="#icon-folder-24x24" class="">
 											</use>
-											<title class="">Remove this file</title>
+											<title class="">Replace file</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
 										</svg>
 									</button>
 								</div>
 							</div>
 						</div>
-						<div class="sd-file__sign">
-							<a download="arrow.svg" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6L" rel="noreferrer" style="width:350px;" target="_blank" title="arrow.svg">arrow.svg</a>
+					</div>
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper">
+								<img alt="File preview" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6L" style="height:250px; width:350px;">
+									<div class="sd-action-bar__item">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-close-16x16" class="">
+													</use>
+													<title class="">Remove this file</title>
+												</svg>
+											</button>
+										</div>
+									</div>
+								</div>
+								<div class="sd-file__sign">
+									<a download="arrow.svg" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6L" rel="noreferrer" style="width:350px;" target="_blank" title="arrow.svg">arrow.svg</a>
+								</div>
+							</span>
 						</div>
-					</span>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/file-mob2-png.snap.html b/tests/markup/snapshots/file-mob2-png.snap.html
index fecd72f482..6e0f462f14 100644
--- a/tests/markup/snapshots/file-mob2-png.snap.html
+++ b/tests/markup/snapshots/file-mob2-png.snap.html
@@ -1,55 +1,59 @@
-<div class="sd-file sd-file--answered sd-file--mobile sd-file--single sd-file--single-image">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Replace file</title>
-								</svg>
-							</label>
-						</div>
-					</div>
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
-									</use>
-									<title class="">Clear</title>
-								</svg>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper">
-						<img alt="File preview" src="#item1.png">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered sd-file--mobile sd-file--single sd-file--single-image">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
 							<div class="sd-action-bar__item">
 								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+									<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
 										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-close-16x16" class="">
+											<use xlink:href="#icon-folder-24x24" class="">
 											</use>
-											<title class="">Remove this file</title>
+											<title class="">Replace file</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
 										</svg>
 									</button>
 								</div>
 							</div>
 						</div>
-						<div class="sd-file__sign">
-							<a download="item1.png" href="#item1.png" rel="noreferrer" target="_blank" title="item1.png">item1.png</a>
+					</div>
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper">
+								<img alt="File preview" src="#item1.png">
+									<div class="sd-action-bar__item">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-close-16x16" class="">
+													</use>
+													<title class="">Remove this file</title>
+												</svg>
+											</button>
+										</div>
+									</div>
+								</div>
+								<div class="sd-file__sign">
+									<a download="item1.png" href="#item1.png" rel="noreferrer" target="_blank" title="item1.png">item1.png</a>
+								</div>
+							</span>
 						</div>
-					</span>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html b/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html
index ec65a079c0..4f9edd0811 100644
--- a/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html
+++ b/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html
@@ -1,27 +1,75 @@
-<div class="sd-file sd-file--answered sd-file--mobile sd-file--readonly">
-	<input class="form-control sd-visuallyhidden" id="testid0i" multiple="" placeholder="Question title" readonly="" style="color:transparent;" type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered sd-file--mobile sd-file--readonly">
+			<input class="form-control sd-visuallyhidden" id="testid0i" multiple="" placeholder="Question title" readonly="" style="color:transparent;" type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Select File" class="sd-action sd-action--brand sd-action--disabled sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Select File</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
+										</svg>
+									</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
+								<svg class="sd-file__default-image sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-file-72x72" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-file__sign">
+								<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							</div>
+						</span>
+					</div>
+				</div>
+				<div class="sd-action-bar sd-action-bar--default-size">
 					<div class="sd-action-bar__item">
 						<div class="sd-action-bar__item-content">
-							<label aria-label="Select File" class="sd-action sd-action--brand sd-action--disabled sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
+							<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
+									<use xlink:href="#icon-arrowleft-16x16" class="">
 									</use>
-									<title class="">Select File</title>
 								</svg>
-							</label>
+							</button>
+						</div>
+					</div>
+					<div class="sd-action-bar__item sv-action--file-index">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" type="button">
+								<span class="sd-action__title">1 of 2</span>
+							</button>
 						</div>
 					</div>
 					<div class="sd-action-bar__item">
 						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
+							<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
+									<use xlink:href="#icon-arrowright-16x16" class="">
 									</use>
-									<title class="">Clear</title>
 								</svg>
 							</button>
 						</div>
@@ -29,49 +77,5 @@
 				</div>
 			</div>
 		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
-						<svg class="sd-file__default-image sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-file-72x72" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-file__sign">
-						<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
-					</div>
-				</span>
-			</div>
-		</div>
-		<div class="sd-action-bar sd-action-bar--default-size">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
-							<use xlink:href="#icon-arrowleft-16x16" class="">
-							</use>
-						</svg>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item sv-action--file-index">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" type="button">
-						<span class="sd-action__title">1 of 2</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
-							<use xlink:href="#icon-arrowright-16x16" class="">
-							</use>
-						</svg>
-					</button>
-				</div>
-			</div>
-		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/file-mob2-zip-png.snap.html b/tests/markup/snapshots/file-mob2-zip-png.snap.html
index c8f0166cf3..f308a6e849 100644
--- a/tests/markup/snapshots/file-mob2-zip-png.snap.html
+++ b/tests/markup/snapshots/file-mob2-zip-png.snap.html
@@ -1,86 +1,90 @@
-<div class="sd-file sd-file--answered sd-file--mobile">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" multiple="" tabindex="-1" title=" " type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Select File" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered sd-file--mobile">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" multiple="" tabindex="-1" title=" " type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Select File" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Select File</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
+										</svg>
+									</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
+								<svg class="sd-file__default-image sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-file-72x72" class="">
 									</use>
-									<title class="">Select File</title>
 								</svg>
-							</label>
-						</div>
+								<div class="sd-action-bar__item">
+									<div class="sd-action-bar__item-content">
+										<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+											<svg class="sd-action__icon sv-svg-icon" role="presentation">
+												<use xlink:href="#icon-close-16x16" class="">
+												</use>
+												<title class="">Remove this file</title>
+											</svg>
+										</button>
+									</div>
+								</div>
+							</div>
+							<div class="sd-file__sign">
+								<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							</div>
+						</span>
 					</div>
+				</div>
+				<div class="sd-action-bar sd-action-bar--default-size">
 					<div class="sd-action-bar__item">
 						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
+							<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
+									<use xlink:href="#icon-arrowleft-16x16" class="">
 									</use>
-									<title class="">Clear</title>
 								</svg>
 							</button>
 						</div>
 					</div>
-				</div>
-			</div>
-		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
-						<svg class="sd-file__default-image sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-file-72x72" class="">
-							</use>
-						</svg>
-						<div class="sd-action-bar__item">
-							<div class="sd-action-bar__item-content">
-								<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
-									<svg class="sd-action__icon sv-svg-icon" role="presentation">
-										<use xlink:href="#icon-close-16x16" class="">
-										</use>
-										<title class="">Remove this file</title>
-									</svg>
-								</button>
-							</div>
+					<div class="sd-action-bar__item sv-action--file-index">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" type="button">
+								<span class="sd-action__title">1 of 2</span>
+							</button>
 						</div>
 					</div>
-					<div class="sd-file__sign">
-						<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
+									<use xlink:href="#icon-arrowright-16x16" class="">
+									</use>
+								</svg>
+							</button>
+						</div>
 					</div>
-				</span>
-			</div>
-		</div>
-		<div class="sd-action-bar sd-action-bar--default-size">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
-							<use xlink:href="#icon-arrowleft-16x16" class="">
-							</use>
-						</svg>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item sv-action--file-index">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" type="button">
-						<span class="sd-action__title">1 of 2</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
-							<use xlink:href="#icon-arrowright-16x16" class="">
-							</use>
-						</svg>
-					</button>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/file-mob2-zip.snap.html b/tests/markup/snapshots/file-mob2-zip.snap.html
index b6e2516079..ea8511770e 100644
--- a/tests/markup/snapshots/file-mob2-zip.snap.html
+++ b/tests/markup/snapshots/file-mob2-zip.snap.html
@@ -1,58 +1,62 @@
-<div class="sd-file sd-file--answered sd-file--mobile sd-file--single">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Replace file</title>
-								</svg>
-							</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered sd-file--mobile sd-file--single">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Replace file</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
+										</svg>
+									</button>
+								</div>
+							</div>
 						</div>
 					</div>
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
+								<svg class="sd-file__default-image sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-file-72x72" class="">
 									</use>
-									<title class="">Clear</title>
 								</svg>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
-						<svg class="sd-file__default-image sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-file-72x72" class="">
-							</use>
-						</svg>
-						<div class="sd-action-bar__item">
-							<div class="sd-action-bar__item-content">
-								<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
-									<svg class="sd-action__icon sv-svg-icon" role="presentation">
-										<use xlink:href="#icon-close-16x16" class="">
-										</use>
-										<title class="">Remove this file</title>
-									</svg>
-								</button>
+								<div class="sd-action-bar__item">
+									<div class="sd-action-bar__item-content">
+										<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+											<svg class="sd-action__icon sv-svg-icon" role="presentation">
+												<use xlink:href="#icon-close-16x16" class="">
+												</use>
+												<title class="">Remove this file</title>
+											</svg>
+										</button>
+									</div>
+								</div>
 							</div>
-						</div>
-					</div>
-					<div class="sd-file__sign">
-						<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							<div class="sd-file__sign">
+								<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							</div>
+						</span>
 					</div>
-				</span>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/file-mob2.snap.html b/tests/markup/snapshots/file-mob2.snap.html
index 00b97241ed..e362039826 100644
--- a/tests/markup/snapshots/file-mob2.snap.html
+++ b/tests/markup/snapshots/file-mob2.snap.html
@@ -1,22 +1,26 @@
-<div class="sd-file sd-file--mobile sd-file--single">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Choose file(s)..." type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<span class="sd-file__drag-area-placeholder">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Drag and drop a file here or click the button below to select a file to upload.</span>
-			</span>
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Select File" class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Select File</title>
-								</svg>
-								<span class="sd-action__title">Select File</span>
-							</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--mobile sd-file--single">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Choose file(s)..." type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<span class="sd-file__drag-area-placeholder">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Drag and drop a file here or click the button below to select a file to upload.</span>
+					</span>
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Select File" class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Select File</title>
+										</svg>
+										<span class="sd-action__title">Select File</span>
+									</label>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/file-mode-both.snap.html b/tests/markup/snapshots/file-mode-both.snap.html
index 8419d8095e..876da8552d 100644
--- a/tests/markup/snapshots/file-mode-both.snap.html
+++ b/tests/markup/snapshots/file-mode-both.snap.html
@@ -1,34 +1,38 @@
-<div class="sd-file sd-file--single">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Choose file(s)..." type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<span class="sd-file__drag-area-placeholder">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Drag and drop or select a file to upload or take a photo using the camera.</span>
-			</span>
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Select File" class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Select File</title>
-								</svg>
-								<span class="sd-action__title">Select File</span>
-							</label>
-						</div>
-					</div>
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-camera-24x24" class="">
-									</use>
-									<title class="">Take Photo</title>
-								</svg>
-								<span class="sd-action__title">Take Photo</span>
-							</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--single">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Choose file(s)..." type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<span class="sd-file__drag-area-placeholder">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Drag and drop or select a file to upload or take a photo using the camera.</span>
+					</span>
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Select File" class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Select File</title>
+										</svg>
+										<span class="sd-action__title">Select File</span>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-camera-24x24" class="">
+											</use>
+											<title class="">Take Photo</title>
+										</svg>
+										<span class="sd-action__title">Take Photo</span>
+									</button>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/file-mode-camera.snap.html b/tests/markup/snapshots/file-mode-camera.snap.html
index b78fd824fb..7baa60148b 100644
--- a/tests/markup/snapshots/file-mode-camera.snap.html
+++ b/tests/markup/snapshots/file-mode-camera.snap.html
@@ -1,21 +1,25 @@
-<div class="sd-file sd-file--single">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<span class="sd-file__drag-area-placeholder">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Click the button below to take a photo using the camera.</span>
-			</span>
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-camera-24x24" class="">
-									</use>
-									<title class="">Take Photo</title>
-								</svg>
-								<span class="sd-action__title">Take Photo</span>
-							</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--single">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<span class="sd-file__drag-area-placeholder">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Click the button below to take a photo using the camera.</span>
+					</span>
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-camera-24x24" class="">
+											</use>
+											<title class="">Take Photo</title>
+										</svg>
+										<span class="sd-action__title">Take Photo</span>
+									</button>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/file-playing-video.snap.html b/tests/markup/snapshots/file-playing-video.snap.html
index 16f61e6e3a..6c021681a6 100644
--- a/tests/markup/snapshots/file-playing-video.snap.html
+++ b/tests/markup/snapshots/file-playing-video.snap.html
@@ -1,37 +1,41 @@
-<div class="sd-file sd-file--single">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__video-container">
-			<div class="sd-action-bar__item sd-action-bar__item--hidden">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--brand sd-action--medium sd-action--quaternary-surface sd-file__change-camera-button" role="button" tabindex="0" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-flip-24x24" class="">
-							</use>
-						</svg>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--brand sd-action--medium sd-action--quaternary-surface sd-file__close-camera-button" role="button" tabindex="0" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-close-24x24" class="">
-							</use>
-						</svg>
-					</button>
-				</div>
-			</div>
-			<video autoplay="" class="sd-file__video" id="testid0_video" playsinline="">
-			</video>
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--alert sd-action--large sd-action--primary sd-file__take-picture-button" role="button" tabindex="0" title="Take Photo" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-camera-32x32" class="">
-							</use>
-							<title class="">Take Photo</title>
-						</svg>
-					</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--single">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__video-container">
+					<div class="sd-action-bar__item sd-action-bar__item--hidden">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--brand sd-action--medium sd-action--quaternary-surface sd-file__change-camera-button" role="button" tabindex="0" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-flip-24x24" class="">
+									</use>
+								</svg>
+							</button>
+						</div>
+					</div>
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--brand sd-action--medium sd-action--quaternary-surface sd-file__close-camera-button" role="button" tabindex="0" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-close-24x24" class="">
+									</use>
+								</svg>
+							</button>
+						</div>
+					</div>
+					<video autoplay="" class="sd-file__video" id="testid0_video" playsinline="">
+					</video>
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--alert sd-action--large sd-action--primary sd-file__take-picture-button" role="button" tabindex="0" title="Take Photo" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-camera-32x32" class="">
+									</use>
+									<title class="">Take Photo</title>
+								</svg>
+							</button>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/file-single-zip-disabled.snap.html b/tests/markup/snapshots/file-single-zip-disabled.snap.html
index b3bb418da7..0eef50562e 100644
--- a/tests/markup/snapshots/file-single-zip-disabled.snap.html
+++ b/tests/markup/snapshots/file-single-zip-disabled.snap.html
@@ -1,58 +1,62 @@
-<div class="sd-file sd-file--answered sd-file--single">
-	<input class="form-control sd-visuallyhidden" disabled="" id="testid0i" placeholder="Question title" style="color:transparent;" type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--disabled sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Replace file</title>
-								</svg>
-							</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered sd-file--single">
+			<input class="form-control sd-visuallyhidden" disabled="" id="testid0i" placeholder="Question title" style="color:transparent;" type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--disabled sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Replace file</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
+										</svg>
+									</button>
+								</div>
+							</div>
 						</div>
 					</div>
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
+								<svg class="sd-file__default-image sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-file-72x72" class="">
 									</use>
-									<title class="">Clear</title>
 								</svg>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
-						<svg class="sd-file__default-image sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-file-72x72" class="">
-							</use>
-						</svg>
-						<div class="sd-action-bar__item">
-							<div class="sd-action-bar__item-content">
-								<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
-									<svg class="sd-action__icon sv-svg-icon" role="presentation">
-										<use xlink:href="#icon-close-16x16" class="">
-										</use>
-										<title class="">Remove this file</title>
-									</svg>
-								</button>
+								<div class="sd-action-bar__item">
+									<div class="sd-action-bar__item-content">
+										<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+											<svg class="sd-action__icon sv-svg-icon" role="presentation">
+												<use xlink:href="#icon-close-16x16" class="">
+												</use>
+												<title class="">Remove this file</title>
+											</svg>
+										</button>
+									</div>
+								</div>
 							</div>
-						</div>
-					</div>
-					<div class="sd-file__sign">
-						<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							<div class="sd-file__sign">
+								<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							</div>
+						</span>
 					</div>
-				</span>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/file-uploading.snap.html b/tests/markup/snapshots/file-uploading.snap.html
index 28a26a0741..98479b81c9 100644
--- a/tests/markup/snapshots/file-uploading.snap.html
+++ b/tests/markup/snapshots/file-uploading.snap.html
@@ -1,12 +1,16 @@
-<div class="sd-file sd-file--single">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" capture="user" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Loading..." type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__loading-indicator">
-			<div class="sd-loading-indicator">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-loading-48x48" class="">
-					</use>
-				</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--single">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" capture="user" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Loading..." type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__loading-indicator">
+					<div class="sd-loading-indicator">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-loading-48x48" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/image-empty.snap.html b/tests/markup/snapshots/image-empty.snap.html
index 15f20917cd..bb91d3eeb2 100644
--- a/tests/markup/snapshots/image-empty.snap.html
+++ b/tests/markup/snapshots/image-empty.snap.html
@@ -1,9 +1,13 @@
-<div class="sd-image">
-	<img alt="banner" class="sd-image__image sd-image__image--adaptive" height="150" style="display:none; object-fit:contain;" width="200">
-		<div class="sd-image__no-image">
-			<svg class="sv-svg-icon" role="presentation" style="height:48px; width:48px;">
-				<use xlink:href="#icon-noimage-48x48" class="">
-				</use>
-			</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-image">
+			<img alt="banner" class="sd-image__image sd-image__image--adaptive" height="150" style="display:none; object-fit:contain;" width="200">
+				<div class="sd-image__no-image">
+					<svg class="sv-svg-icon" role="presentation" style="height:48px; width:48px;">
+						<use xlink:href="#icon-noimage-48x48" class="">
+						</use>
+					</svg>
+				</div>
+			</div>
 		</div>
 	</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/image-not-load-content.snap.html b/tests/markup/snapshots/image-not-load-content.snap.html
index b09081e31f..fa49a485e8 100644
--- a/tests/markup/snapshots/image-not-load-content.snap.html
+++ b/tests/markup/snapshots/image-not-load-content.snap.html
@@ -1,9 +1,13 @@
-<div class="sd-image">
-	<img alt="banner" class="sd-image__image sd-image__image--adaptive" height="150" src="#item1.jpg" style="display:none; object-fit:contain;" width="200">
-		<div class="sd-image__no-image">
-			<svg class="sv-svg-icon" role="presentation" style="height:48px; width:48px;">
-				<use xlink:href="#icon-noimage-48x48" class="">
-				</use>
-			</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-image">
+			<img alt="banner" class="sd-image__image sd-image__image--adaptive" height="150" src="#item1.jpg" style="display:none; object-fit:contain;" width="200">
+				<div class="sd-image__no-image">
+					<svg class="sv-svg-icon" role="presentation" style="height:48px; width:48px;">
+						<use xlink:href="#icon-noimage-48x48" class="">
+						</use>
+					</svg>
+				</div>
+			</div>
 		</div>
 	</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/image-video.snap.html b/tests/markup/snapshots/image-video.snap.html
index fc8082fc7c..bf4a205787 100644
--- a/tests/markup/snapshots/image-video.snap.html
+++ b/tests/markup/snapshots/image-video.snap.html
@@ -1,4 +1,8 @@
-<div class="sd-image">
-	<video class="sd-image__image" controls="" height="300" src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" style="object-fit:contain;" width="500">
-	</video>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-image">
+			<video class="sd-image__image" controls="" height="300" src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" style="object-fit:contain;" width="500">
+			</video>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/image-youtube.snap.html b/tests/markup/snapshots/image-youtube.snap.html
index 8219cfa248..5fdc856480 100644
--- a/tests/markup/snapshots/image-youtube.snap.html
+++ b/tests/markup/snapshots/image-youtube.snap.html
@@ -1,4 +1,8 @@
-<div class="sd-image">
-	<iframe class="sd-image__image" height="450" src="testurl" style="object-fit:contain;" title="question1" width="800">
-	</iframe>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-image">
+			<iframe class="sd-image__image" height="450" src="testurl" style="object-fit:contain;" title="question1" width="800">
+			</iframe>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/image.snap.html b/tests/markup/snapshots/image.snap.html
index 3927742b74..8ce5833d4f 100644
--- a/tests/markup/snapshots/image.snap.html
+++ b/tests/markup/snapshots/image.snap.html
@@ -1,3 +1,7 @@
-<div class="sd-image">
-	<img alt="banner" class="sd-image__image" height="300" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="object-fit:contain;" width="500">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-image">
+			<img alt="banner" class="sd-image__image" height="300" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="object-fit:contain;" width="500">
+			</div>
+		</div>
 	</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker-colCount-1-v2.snap.html b/tests/markup/snapshots/imagepicker-colCount-1-v2.snap.html
index 4091f94acb..9000146f04 100644
--- a/tests/markup/snapshots/imagepicker-colCount-1-v2.snap.html
+++ b/tests/markup/snapshots/imagepicker-colCount-1-v2.snap.html
@@ -1,35 +1,39 @@
-<fieldset class="sd-imagepicker sd-imagepicker--column sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sv-q-col-1">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
-					</div>
-				</div>
-			</label>
-		</div>
-		<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sv-q-col-1">
-			<label class="sd-imagepicker__label">
-				<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
-				<div class="sd-imagepicker__item-decorator">
-					<div class="sd-imagepicker__image-container">
-						<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-							<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-check-24x24" class="">
-								</use>
-							</svg>
-						</span>
-						<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--column sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sv-q-col-1">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
+							</div>
 						</div>
+					</label>
+				</div>
+				<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sv-q-col-1">
+					<label class="sd-imagepicker__label">
+						<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
+						<div class="sd-imagepicker__item-decorator">
+							<div class="sd-imagepicker__image-container">
+								<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+									<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-check-24x24" class="">
+										</use>
+									</svg>
+								</span>
+								<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+								</div>
+							</div>
+						</label>
 					</div>
-				</label>
+				</fieldset>
 			</div>
-		</fieldset>
\ No newline at end of file
+		</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker-colCount-2-v2.snap.html b/tests/markup/snapshots/imagepicker-colCount-2-v2.snap.html
index 23f5b5ab0d..c6f1074ac2 100644
--- a/tests/markup/snapshots/imagepicker-colCount-2-v2.snap.html
+++ b/tests/markup/snapshots/imagepicker-colCount-2-v2.snap.html
@@ -1,39 +1,43 @@
-<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__column sd-selectbase__column sv-q-column-2" role="presentation">
-		<div class="sd-imagepicker__item sd-imagepicker__item--allowhover">
-			<label class="sd-imagepicker__label">
-				<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
-				<div class="sd-imagepicker__item-decorator">
-					<div class="sd-imagepicker__image-container">
-						<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-							<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-check-24x24" class="">
-								</use>
-							</svg>
-						</span>
-						<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
-						</div>
-					</div>
-				</label>
-			</div>
-		</div>
-		<div class="sd-imagepicker__column sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover">
-				<label class="sd-imagepicker__label">
-					<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
-					<div class="sd-imagepicker__item-decorator">
-						<div class="sd-imagepicker__image-container">
-							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-check-24x24" class="">
-									</use>
-								</svg>
-							</span>
-							<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__column sd-selectbase__column sv-q-column-2" role="presentation">
+				<div class="sd-imagepicker__item sd-imagepicker__item--allowhover">
+					<label class="sd-imagepicker__label">
+						<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
+						<div class="sd-imagepicker__item-decorator">
+							<div class="sd-imagepicker__image-container">
+								<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+									<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-check-24x24" class="">
+										</use>
+									</svg>
+								</span>
+								<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
+								</div>
 							</div>
-						</div>
-					</label>
+						</label>
+					</div>
 				</div>
+				<div class="sd-imagepicker__column sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-imagepicker__item sd-imagepicker__item--allowhover">
+						<label class="sd-imagepicker__label">
+							<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
+							<div class="sd-imagepicker__item-decorator">
+								<div class="sd-imagepicker__image-container">
+									<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+										<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-check-24x24" class="">
+											</use>
+										</svg>
+									</span>
+									<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+									</div>
+								</div>
+							</label>
+						</div>
+					</div>
+				</fieldset>
 			</div>
-		</fieldset>
\ No newline at end of file
+		</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker-disabled.snap.html b/tests/markup/snapshots/imagepicker-disabled.snap.html
index ca54d0a0ee..c6bbaa59ec 100644
--- a/tests/markup/snapshots/imagepicker-disabled.snap.html
+++ b/tests/markup/snapshots/imagepicker-disabled.snap.html
@@ -1,41 +1,45 @@
-<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__item sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<img alt="item1" class="sd-imagepicker__image" height="150" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="object-fit:contain;" width="200">
-					</div>
-					<span class="sd-imagepicker__text">
-						<span class="sv-string-editor" contenteditable="true">item1</span>
-					</span>
-				</div>
-			</label>
-		</div>
-		<div class="sd-imagepicker__item sd-imagepicker__item--inline">
-			<label class="sd-imagepicker__label">
-				<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
-				<div class="sd-imagepicker__item-decorator">
-					<div class="sd-imagepicker__image-container">
-						<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-							<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-check-24x24" class="">
-								</use>
-							</svg>
-						</span>
-						<img alt="item2" class="sd-imagepicker__image" height="150" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="object-fit:contain;" width="200">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__item sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<img alt="item1" class="sd-imagepicker__image" height="150" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="object-fit:contain;" width="200">
+							</div>
+							<span class="sd-imagepicker__text">
+								<span class="sv-string-editor" contenteditable="true">item1</span>
+							</span>
 						</div>
-						<span class="sd-imagepicker__text">
-							<span class="sv-string-editor" contenteditable="true">item2</span>
-						</span>
+					</label>
+				</div>
+				<div class="sd-imagepicker__item sd-imagepicker__item--inline">
+					<label class="sd-imagepicker__label">
+						<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
+						<div class="sd-imagepicker__item-decorator">
+							<div class="sd-imagepicker__image-container">
+								<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+									<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-check-24x24" class="">
+										</use>
+									</svg>
+								</span>
+								<img alt="item2" class="sd-imagepicker__image" height="150" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="object-fit:contain;" width="200">
+								</div>
+								<span class="sd-imagepicker__text">
+									<span class="sv-string-editor" contenteditable="true">item2</span>
+								</span>
+							</div>
+						</label>
 					</div>
-				</label>
+				</fieldset>
 			</div>
-		</fieldset>
\ No newline at end of file
+		</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker-labels.snap.html b/tests/markup/snapshots/imagepicker-labels.snap.html
index 91d6f0a121..753ffc5ef3 100644
--- a/tests/markup/snapshots/imagepicker-labels.snap.html
+++ b/tests/markup/snapshots/imagepicker-labels.snap.html
@@ -1,41 +1,45 @@
-<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
-					</div>
-					<span class="sd-imagepicker__text">
-						<span class="sv-string-viewer">item1</span>
-					</span>
-				</div>
-			</label>
-		</div>
-		<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-			<label class="sd-imagepicker__label">
-				<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
-				<div class="sd-imagepicker__item-decorator">
-					<div class="sd-imagepicker__image-container">
-						<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-							<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-check-24x24" class="">
-								</use>
-							</svg>
-						</span>
-						<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
+							</div>
+							<span class="sd-imagepicker__text">
+								<span class="sv-string-viewer">item1</span>
+							</span>
 						</div>
-						<span class="sd-imagepicker__text">
-							<span class="sv-string-viewer">item2</span>
-						</span>
+					</label>
+				</div>
+				<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+					<label class="sd-imagepicker__label">
+						<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
+						<div class="sd-imagepicker__item-decorator">
+							<div class="sd-imagepicker__image-container">
+								<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+									<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-check-24x24" class="">
+										</use>
+									</svg>
+								</span>
+								<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+								</div>
+								<span class="sd-imagepicker__text">
+									<span class="sv-string-viewer">item2</span>
+								</span>
+							</div>
+						</label>
 					</div>
-				</label>
+				</fieldset>
 			</div>
-		</fieldset>
\ No newline at end of file
+		</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker-multi.snap.html b/tests/markup/snapshots/imagepicker-multi.snap.html
index f818c0bbb6..f53bb18405 100644
--- a/tests/markup/snapshots/imagepicker-multi.snap.html
+++ b/tests/markup/snapshots/imagepicker-multi.snap.html
@@ -1,35 +1,39 @@
-<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="checkbox" value="item1">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
-					</div>
-				</div>
-			</label>
-		</div>
-		<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-			<label class="sd-imagepicker__label">
-				<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="checkbox" value="item2">
-				<div class="sd-imagepicker__item-decorator">
-					<div class="sd-imagepicker__image-container">
-						<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-							<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-check-24x24" class="">
-								</use>
-							</svg>
-						</span>
-						<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="checkbox" value="item1">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
+							</div>
 						</div>
+					</label>
+				</div>
+				<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+					<label class="sd-imagepicker__label">
+						<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="checkbox" value="item2">
+						<div class="sd-imagepicker__item-decorator">
+							<div class="sd-imagepicker__image-container">
+								<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+									<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-check-24x24" class="">
+										</use>
+									</svg>
+								</span>
+								<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+								</div>
+							</div>
+						</label>
 					</div>
-				</label>
+				</fieldset>
 			</div>
-		</fieldset>
\ No newline at end of file
+		</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker-no-image-v2.snap.html b/tests/markup/snapshots/imagepicker-no-image-v2.snap.html
index 31beb3c9fa..18a0b425b0 100644
--- a/tests/markup/snapshots/imagepicker-no-image-v2.snap.html
+++ b/tests/markup/snapshots/imagepicker-no-image-v2.snap.html
@@ -1,45 +1,49 @@
-<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<div class="sd-imagepicker__no-image" style="height:150px; object-fit:contain; width:200px;">
-						<svg class="sd-imagepicker__no-image-svg sv-svg-icon" role="presentation" style="height:48px; width:48px;">
-							<use xlink:href="#icon-noimage-48x48" class="">
-							</use>
-						</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<div class="sd-imagepicker__no-image" style="height:150px; object-fit:contain; width:200px;">
+								<svg class="sd-imagepicker__no-image-svg sv-svg-icon" role="presentation" style="height:48px; width:48px;">
+									<use xlink:href="#icon-noimage-48x48" class="">
+									</use>
+								</svg>
+							</div>
+						</div>
 					</div>
-				</div>
+				</label>
 			</div>
-		</label>
-	</div>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<div class="sd-imagepicker__no-image" style="height:150px; object-fit:contain; width:200px;">
-						<svg class="sd-imagepicker__no-image-svg sv-svg-icon" role="presentation" style="height:48px; width:48px;">
-							<use xlink:href="#icon-noimage-48x48" class="">
-							</use>
-						</svg>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<div class="sd-imagepicker__no-image" style="height:150px; object-fit:contain; width:200px;">
+								<svg class="sd-imagepicker__no-image-svg sv-svg-icon" role="presentation" style="height:48px; width:48px;">
+									<use xlink:href="#icon-noimage-48x48" class="">
+									</use>
+								</svg>
+							</div>
+						</div>
 					</div>
-				</div>
+				</label>
 			</div>
-		</label>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker-no-image.snap.html b/tests/markup/snapshots/imagepicker-no-image.snap.html
index 31beb3c9fa..18a0b425b0 100644
--- a/tests/markup/snapshots/imagepicker-no-image.snap.html
+++ b/tests/markup/snapshots/imagepicker-no-image.snap.html
@@ -1,45 +1,49 @@
-<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<div class="sd-imagepicker__no-image" style="height:150px; object-fit:contain; width:200px;">
-						<svg class="sd-imagepicker__no-image-svg sv-svg-icon" role="presentation" style="height:48px; width:48px;">
-							<use xlink:href="#icon-noimage-48x48" class="">
-							</use>
-						</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<div class="sd-imagepicker__no-image" style="height:150px; object-fit:contain; width:200px;">
+								<svg class="sd-imagepicker__no-image-svg sv-svg-icon" role="presentation" style="height:48px; width:48px;">
+									<use xlink:href="#icon-noimage-48x48" class="">
+									</use>
+								</svg>
+							</div>
+						</div>
 					</div>
-				</div>
+				</label>
 			</div>
-		</label>
-	</div>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<div class="sd-imagepicker__no-image" style="height:150px; object-fit:contain; width:200px;">
-						<svg class="sd-imagepicker__no-image-svg sv-svg-icon" role="presentation" style="height:48px; width:48px;">
-							<use xlink:href="#icon-noimage-48x48" class="">
-							</use>
-						</svg>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<div class="sd-imagepicker__no-image" style="height:150px; object-fit:contain; width:200px;">
+								<svg class="sd-imagepicker__no-image-svg sv-svg-icon" role="presentation" style="height:48px; width:48px;">
+									<use xlink:href="#icon-noimage-48x48" class="">
+									</use>
+								</svg>
+							</div>
+						</div>
 					</div>
-				</div>
+				</label>
 			</div>
-		</label>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker-readonly.snap.html b/tests/markup/snapshots/imagepicker-readonly.snap.html
index 9601f3aa4d..853aa0d5e7 100644
--- a/tests/markup/snapshots/imagepicker-readonly.snap.html
+++ b/tests/markup/snapshots/imagepicker-readonly.snap.html
@@ -1,41 +1,45 @@
-<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline sd-imagepicker__item--readonly">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" readonly="" type="radio" value="item1">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<img alt="item1" class="sd-imagepicker__image" height="150" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="object-fit:contain;" width="200">
-					</div>
-					<span class="sd-imagepicker__text">
-						<span class="sv-string-viewer">item1</span>
-					</span>
-				</div>
-			</label>
-		</div>
-		<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline sd-imagepicker__item--readonly">
-			<label class="sd-imagepicker__label">
-				<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" readonly="" type="radio" value="item2">
-				<div class="sd-imagepicker__item-decorator">
-					<div class="sd-imagepicker__image-container">
-						<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-							<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-check-24x24" class="">
-								</use>
-							</svg>
-						</span>
-						<img alt="item2" class="sd-imagepicker__image" height="150" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="object-fit:contain;" width="200">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline sd-imagepicker__item--readonly">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" readonly="" type="radio" value="item1">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<img alt="item1" class="sd-imagepicker__image" height="150" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="object-fit:contain;" width="200">
+							</div>
+							<span class="sd-imagepicker__text">
+								<span class="sv-string-viewer">item1</span>
+							</span>
 						</div>
-						<span class="sd-imagepicker__text">
-							<span class="sv-string-viewer">item2</span>
-						</span>
+					</label>
+				</div>
+				<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline sd-imagepicker__item--readonly">
+					<label class="sd-imagepicker__label">
+						<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" readonly="" type="radio" value="item2">
+						<div class="sd-imagepicker__item-decorator">
+							<div class="sd-imagepicker__image-container">
+								<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+									<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-check-24x24" class="">
+										</use>
+									</svg>
+								</span>
+								<img alt="item2" class="sd-imagepicker__image" height="150" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="object-fit:contain;" width="200">
+								</div>
+								<span class="sd-imagepicker__text">
+									<span class="sv-string-viewer">item2</span>
+								</span>
+							</div>
+						</label>
 					</div>
-				</label>
+				</fieldset>
 			</div>
-		</fieldset>
\ No newline at end of file
+		</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker-video.snap.html b/tests/markup/snapshots/imagepicker-video.snap.html
index 97532b0def..a41a9188a2 100644
--- a/tests/markup/snapshots/imagepicker-video.snap.html
+++ b/tests/markup/snapshots/imagepicker-video.snap.html
@@ -1,43 +1,47 @@
-<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<video class="sd-imagepicker__image" controls="" height="150" src="#item1.mp4" style="object-fit:contain;" width="200">
-					</video>
-				</div>
-				<span class="sd-imagepicker__text">
-					<span class="sv-string-viewer">item1</span>
-				</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<video class="sd-imagepicker__image" controls="" height="150" src="#item1.mp4" style="object-fit:contain;" width="200">
+							</video>
+						</div>
+						<span class="sd-imagepicker__text">
+							<span class="sv-string-viewer">item1</span>
+						</span>
+					</div>
+				</label>
 			</div>
-		</label>
-	</div>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<video class="sd-imagepicker__image" controls="" height="150" src="#item2.mp4" style="object-fit:contain;" width="200">
-					</video>
-				</div>
-				<span class="sd-imagepicker__text">
-					<span class="sv-string-viewer">item2</span>
-				</span>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<video class="sd-imagepicker__image" controls="" height="150" src="#item2.mp4" style="object-fit:contain;" width="200">
+							</video>
+						</div>
+						<span class="sd-imagepicker__text">
+							<span class="sv-string-viewer">item2</span>
+						</span>
+					</div>
+				</label>
 			</div>
-		</label>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker.snap.html b/tests/markup/snapshots/imagepicker.snap.html
index 19da5f67fc..8443e4c63f 100644
--- a/tests/markup/snapshots/imagepicker.snap.html
+++ b/tests/markup/snapshots/imagepicker.snap.html
@@ -1,35 +1,39 @@
-<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
-					</div>
-				</div>
-			</label>
-		</div>
-		<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-			<label class="sd-imagepicker__label">
-				<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
-				<div class="sd-imagepicker__item-decorator">
-					<div class="sd-imagepicker__image-container">
-						<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-							<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-check-24x24" class="">
-								</use>
-							</svg>
-						</span>
-						<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
+							</div>
 						</div>
+					</label>
+				</div>
+				<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+					<label class="sd-imagepicker__label">
+						<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
+						<div class="sd-imagepicker__item-decorator">
+							<div class="sd-imagepicker__image-container">
+								<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+									<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-check-24x24" class="">
+										</use>
+									</svg>
+								</span>
+								<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+								</div>
+							</div>
+						</label>
 					</div>
-				</label>
+				</fieldset>
 			</div>
-		</fieldset>
\ No newline at end of file
+		</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/layout-page-swnl-title-v2.snap.html b/tests/markup/snapshots/layout-page-swnl-title-v2.snap.html
index 9da87abf83..6a74edbc54 100644
--- a/tests/markup/snapshots/layout-page-swnl-title-v2.snap.html
+++ b/tests/markup/snapshots/layout-page-swnl-title-v2.snap.html
@@ -1,31 +1,41 @@
-<div style="flex:1 0 50%; max-width:100%;">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row sd-row--multiple">
+	<div style="flex:1 0 50%; max-width:100%;">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
-<div style="flex:1 0 50%; max-width:100%;">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid1">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">2.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid1i" placeholder="" type="text">
+	<div style="flex:1 0 50%; max-width:100%;">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid1">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">2.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid1i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/layout-page-swnl-v2.snap.html b/tests/markup/snapshots/layout-page-swnl-v2.snap.html
index 6a078b87cb..e28f603fb9 100644
--- a/tests/markup/snapshots/layout-page-swnl-v2.snap.html
+++ b/tests/markup/snapshots/layout-page-swnl-v2.snap.html
@@ -1,14 +1,24 @@
-<div style="flex:1 0 50%; max-width:100%;">
-	<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-html">HTML1</div>
+<div class="sd-clearfix sd-page__row sd-row sd-row--multiple">
+	<div style="flex:1 0 50%; max-width:100%;">
+		<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-html">HTML1</div>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
-</div>
-<div style="flex:1 0 50%; max-width:100%;">
-	<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-html">HTML2</div>
+	<div style="flex:1 0 50%; max-width:100%;">
+		<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-html">HTML2</div>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/layout-panel-page-swnl-title-v2.snap.html b/tests/markup/snapshots/layout-panel-page-swnl-title-v2.snap.html
index 3bf542c02d..91e83d9e8b 100644
--- a/tests/markup/snapshots/layout-panel-page-swnl-title-v2.snap.html
+++ b/tests/markup/snapshots/layout-panel-page-swnl-title-v2.snap.html
@@ -1,33 +1,43 @@
-<div style="flex:1 0 50%; max-width:100%;">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row sd-row--multiple">
+	<div style="flex:1 0 50%; max-width:100%;">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
-<div style="flex:1 0 50%; max-width:100%;">
-	<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
-		<div aria-label="name" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
-			<div class="sd-clearfix sd-row">
-				<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-					<div class="sd-element sd-element--nested sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid1">
-						<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-							<div class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle">
-								<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-							</div>
-						</div>
-						<div class="sd-question__content sd-question__content--text" role="presentation">
-							<div class="sd-formbox sd-text">
-								<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid1i" placeholder="" type="text">
+	<div style="flex:1 0 50%; max-width:100%;">
+		<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
+			<div aria-label="name" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
+				<div class="sd-clearfix sd-row">
+					<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+						<div class="sd-element sd-element--nested sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid1">
+							<div class="sd-question__container">
+								<div class="sd-question__header-and-content-container">
+									<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+										<div class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle">
+											<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+										</div>
+									</div>
+									<div class="sd-question__content sd-question__content--text" role="presentation">
+										<div class="sd-formbox sd-text">
+											<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid1i" placeholder="" type="text">
+										</div>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
diff --git a/tests/markup/snapshots/layout-panel-page-swnl-v2.snap.html b/tests/markup/snapshots/layout-panel-page-swnl-v2.snap.html
index 713d726220..7c86b1dd30 100644
--- a/tests/markup/snapshots/layout-panel-page-swnl-v2.snap.html
+++ b/tests/markup/snapshots/layout-panel-page-swnl-v2.snap.html
@@ -1,18 +1,28 @@
-<div style="flex:1 0 50%; max-width:100%;">
-	<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-html">HTML1</div>
+<div class="sd-clearfix sd-page__row sd-row sd-row--multiple">
+	<div style="flex:1 0 50%; max-width:100%;">
+		<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-html">HTML1</div>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
-</div>
-<div style="flex:1 0 50%; max-width:100%;">
-	<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
-		<div aria-label="name" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
-			<div class="sd-clearfix sd-row">
-				<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-					<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
-						<div class="sd-element__content sd-question__content" role="presentation">
-							<div class="sd-element--nested sd-html sd-html--nested">HTML2</div>
+	<div style="flex:1 0 50%; max-width:100%;">
+		<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
+			<div aria-label="name" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
+				<div class="sd-clearfix sd-row">
+					<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+						<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
+							<div class="sd-question__container">
+								<div class="sd-question__header-and-content-container">
+									<div class="sd-element__content sd-question__content" role="presentation">
+										<div class="sd-element--nested sd-html sd-html--nested">HTML2</div>
+									</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/martix-celltype-text-a11y.snap.html b/tests/markup/snapshots/martix-celltype-text-a11y.snap.html
index 4a7bfd43bb..1636037546 100644
--- a/tests/markup/snapshots/martix-celltype-text-a11y.snap.html
+++ b/tests/markup/snapshots/martix-celltype-text-a11y.snap.html
@@ -1,63 +1,67 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">Number of people</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">Age 0-4</span>
-				</td>
-				<td class="sd-question--answered sd-table__cell" colspan="1" title="Number of people">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Age 0-4, column Number of people" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row1cell1i" min="0" placeholder="" step="any" type="number">
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row3">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">Age 5-11</span>
-				</td>
-				<td class="sd-question--answered sd-table__cell" colspan="1" title="Number of people">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Age 5-11, column Number of people" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row3cell1i" min="0" placeholder="" step="any" type="number">
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row5">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">Age 12-15</span>
-				</td>
-				<td class="sd-question--answered sd-table__cell" colspan="1" title="Number of people">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Age 12-15, column Number of people" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row5cell1i" min="0" placeholder="" step="any" type="number">
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row7">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">Age 16+</span>
-				</td>
-				<td class="sd-question--answered sd-table__cell" colspan="1" title="Number of people">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Age 16+, column Number of people" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row7cell1i" min="0" placeholder="" step="any" type="number">
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" data-sv-drop-target-matrix="testid0row7" data-sv-drop-target-matrix-row="testid0row7" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">Number of people</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">Age 0-4</span>
+						</td>
+						<td class="sd-question--answered sd-table__cell" colspan="1" title="Number of people">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Age 0-4, column Number of people" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row1cell1i" min="0" placeholder="" step="any" type="number">
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row3">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">Age 5-11</span>
+						</td>
+						<td class="sd-question--answered sd-table__cell" colspan="1" title="Number of people">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Age 5-11, column Number of people" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row3cell1i" min="0" placeholder="" step="any" type="number">
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row5">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">Age 12-15</span>
+						</td>
+						<td class="sd-question--answered sd-table__cell" colspan="1" title="Number of people">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Age 12-15, column Number of people" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row5cell1i" min="0" placeholder="" step="any" type="number">
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row7">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">Age 16+</span>
+						</td>
+						<td class="sd-question--answered sd-table__cell" colspan="1" title="Number of people">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Age 16+, column Number of people" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row7cell1i" min="0" placeholder="" step="any" type="number">
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrix-celltype-checkbox.snap.html b/tests/markup/snapshots/matrix-celltype-checkbox.snap.html
index 24210451e7..c64285864b 100644
--- a/tests/markup/snapshots/matrix-celltype-checkbox.snap.html
+++ b/tests/markup/snapshots/matrix-celltype-checkbox.snap.html
@@ -1,87 +1,91 @@
-<div class="sd-matrix sd-table-wrapper">
-	<fieldset role="radiogroup">
-		<legend class="sv-visuallyhidden">matrix</legend>
-		<table class="sd-matrix__table sd-table sd-table--align-middle" role="presentation">
-			<thead role="presentation">
-				<tr>
-					<td>
-					</td>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_2</span>
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_1</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-checkbox sd-checkbox--allowhover sd-item sd-matrix__label">
-							<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="checkbox" value="col_1">
-							<span class="sd-checkbox__decorator sd-item__decorator">
-								<svg class="sd-checkbox__svg sd-item__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-							<span class="sd-matrix__responsive-title">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-matrix sd-table-wrapper">
+			<fieldset role="radiogroup">
+				<legend class="sv-visuallyhidden">matrix</legend>
+				<table class="sd-matrix__table sd-table sd-table--align-middle" role="presentation">
+					<thead role="presentation">
+						<tr>
+							<td>
+							</td>
+							<th class="sd-table__cell sd-table__cell--header">
 								<span class="sv-string-viewer">col_1</span>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-checkbox sd-checkbox--allowhover sd-item sd-matrix__label">
-							<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="checkbox" value="col_2">
-							<span class="sd-checkbox__decorator sd-item__decorator">
-								<svg class="sd-checkbox__svg sd-item__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-							<span class="sd-matrix__responsive-title">
+							</th>
+							<th class="sd-table__cell sd-table__cell--header">
 								<span class="sv-string-viewer">col_2</span>
-							</span>
-						</label>
-					</td>
-				</tr>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_2</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-checkbox sd-checkbox--allowhover sd-item sd-matrix__label">
-							<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="checkbox" value="col_1">
-							<span class="sd-checkbox__decorator sd-item__decorator">
-								<svg class="sd-checkbox__svg sd-item__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-							<span class="sd-matrix__responsive-title">
-								<span class="sv-string-viewer">col_1</span>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-checkbox sd-checkbox--allowhover sd-item sd-matrix__label">
-							<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="checkbox" value="col_2">
-							<span class="sd-checkbox__decorator sd-item__decorator">
-								<svg class="sd-checkbox__svg sd-item__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-							<span class="sd-matrix__responsive-title">
-								<span class="sv-string-viewer">col_2</span>
-							</span>
-						</label>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</fieldset>
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_1</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-checkbox sd-checkbox--allowhover sd-item sd-matrix__label">
+									<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="checkbox" value="col_1">
+									<span class="sd-checkbox__decorator sd-item__decorator">
+										<svg class="sd-checkbox__svg sd-item__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+									<span class="sd-matrix__responsive-title">
+										<span class="sv-string-viewer">col_1</span>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-checkbox sd-checkbox--allowhover sd-item sd-matrix__label">
+									<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="checkbox" value="col_2">
+									<span class="sd-checkbox__decorator sd-item__decorator">
+										<svg class="sd-checkbox__svg sd-item__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+									<span class="sd-matrix__responsive-title">
+										<span class="sv-string-viewer">col_2</span>
+									</span>
+								</label>
+							</td>
+						</tr>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_2</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-checkbox sd-checkbox--allowhover sd-item sd-matrix__label">
+									<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="checkbox" value="col_1">
+									<span class="sd-checkbox__decorator sd-item__decorator">
+										<svg class="sd-checkbox__svg sd-item__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+									<span class="sd-matrix__responsive-title">
+										<span class="sv-string-viewer">col_1</span>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-checkbox sd-checkbox--allowhover sd-item sd-matrix__label">
+									<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="checkbox" value="col_2">
+									<span class="sd-checkbox__decorator sd-item__decorator">
+										<svg class="sd-checkbox__svg sd-item__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+									<span class="sd-matrix__responsive-title">
+										<span class="sv-string-viewer">col_2</span>
+									</span>
+								</label>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrix-empty.snap.html b/tests/markup/snapshots/matrix-empty.snap.html
index 7127337d1a..37f188de8a 100644
--- a/tests/markup/snapshots/matrix-empty.snap.html
+++ b/tests/markup/snapshots/matrix-empty.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-matrix sd-table-wrapper">
-	<fieldset role="radiogroup">
-		<legend class="sv-visuallyhidden">matrix</legend>
-		<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
-			<thead role="presentation">
-				<tr>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_2</span>
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-			</tbody>
-		</table>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-matrix sd-table-wrapper">
+			<fieldset role="radiogroup">
+				<legend class="sv-visuallyhidden">matrix</legend>
+				<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
+					<thead role="presentation">
+						<tr>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-viewer">col_1</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-viewer">col_2</span>
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+					</tbody>
+				</table>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrix-mobile-v2.snap.html b/tests/markup/snapshots/matrix-mobile-v2.snap.html
index 7c16747b53..788964af33 100644
--- a/tests/markup/snapshots/matrix-mobile-v2.snap.html
+++ b/tests/markup/snapshots/matrix-mobile-v2.snap.html
@@ -1,87 +1,91 @@
-<div class="sd-matrix sd-table-wrapper">
-	<fieldset role="radiogroup">
-		<legend class="sv-visuallyhidden">matrix</legend>
-		<table class="sd-matrix__table sd-table sd-table--align-middle" role="presentation">
-			<thead role="presentation">
-				<tr>
-					<td>
-					</td>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_2</span>
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_1</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-							<span class="sd-matrix__responsive-title">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-matrix sd-table-wrapper">
+			<fieldset role="radiogroup">
+				<legend class="sv-visuallyhidden">matrix</legend>
+				<table class="sd-matrix__table sd-table sd-table--align-middle" role="presentation">
+					<thead role="presentation">
+						<tr>
+							<td>
+							</td>
+							<th class="sd-table__cell sd-table__cell--header">
 								<span class="sv-string-viewer">col_1</span>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-							<span class="sd-matrix__responsive-title">
+							</th>
+							<th class="sd-table__cell sd-table__cell--header">
 								<span class="sv-string-viewer">col_2</span>
-							</span>
-						</label>
-					</td>
-				</tr>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_2</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-							<span class="sd-matrix__responsive-title">
-								<span class="sv-string-viewer">col_1</span>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-							<span class="sd-matrix__responsive-title">
-								<span class="sv-string-viewer">col_2</span>
-							</span>
-						</label>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</fieldset>
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_1</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+									<span class="sd-matrix__responsive-title">
+										<span class="sv-string-viewer">col_1</span>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+									<span class="sd-matrix__responsive-title">
+										<span class="sv-string-viewer">col_2</span>
+									</span>
+								</label>
+							</td>
+						</tr>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_2</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+									<span class="sd-matrix__responsive-title">
+										<span class="sv-string-viewer">col_1</span>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+									<span class="sd-matrix__responsive-title">
+										<span class="sv-string-viewer">col_2</span>
+									</span>
+								</label>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrix-modern.snap.html b/tests/markup/snapshots/matrix-modern.snap.html
index eda3e28d93..8bfce4b0fb 100644
--- a/tests/markup/snapshots/matrix-modern.snap.html
+++ b/tests/markup/snapshots/matrix-modern.snap.html
@@ -1,75 +1,79 @@
-<div class="sd-matrix sd-table-wrapper">
-	<fieldset role="radiogroup">
-		<legend class="sv-visuallyhidden">matrix</legend>
-		<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
-			<thead role="presentation">
-				<tr>
-					<td>
-					</td>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_2</span>
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_1</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_2</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-matrix sd-table-wrapper">
+			<fieldset role="radiogroup">
+				<legend class="sv-visuallyhidden">matrix</legend>
+				<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
+					<thead role="presentation">
+						<tr>
+							<td>
+							</td>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-viewer">col_1</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-viewer">col_2</span>
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_1</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_2</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrix-v2-disabled.snap.html b/tests/markup/snapshots/matrix-v2-disabled.snap.html
index 16ccb07250..378445757d 100644
--- a/tests/markup/snapshots/matrix-v2-disabled.snap.html
+++ b/tests/markup/snapshots/matrix-v2-disabled.snap.html
@@ -1,75 +1,79 @@
-<div class="sd-matrix sd-table-wrapper">
-	<fieldset role="radiogroup">
-		<legend class="sv-visuallyhidden">matrix</legend>
-		<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
-			<thead role="presentation">
-				<tr>
-					<td>
-					</td>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-editor" contenteditable="true">col_1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-editor" contenteditable="true">col_2</span>
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row sd-table__row-readonly">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-editor" contenteditable="true">row_1</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-				<tr class="sd-table__row sd-table__row-readonly">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-editor" contenteditable="true">row_2</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-matrix sd-table-wrapper">
+			<fieldset role="radiogroup">
+				<legend class="sv-visuallyhidden">matrix</legend>
+				<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
+					<thead role="presentation">
+						<tr>
+							<td>
+							</td>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-editor" contenteditable="true">col_1</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-editor" contenteditable="true">col_2</span>
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row sd-table__row-readonly">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-editor" contenteditable="true">row_1</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+						<tr class="sd-table__row sd-table__row-readonly">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-editor" contenteditable="true">row_2</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrix-v2-readonly.snap.html b/tests/markup/snapshots/matrix-v2-readonly.snap.html
index 0cb6a9d7b8..0505d9beed 100644
--- a/tests/markup/snapshots/matrix-v2-readonly.snap.html
+++ b/tests/markup/snapshots/matrix-v2-readonly.snap.html
@@ -1,75 +1,79 @@
-<div class="sd-matrix sd-table-wrapper">
-	<fieldset role="radiogroup">
-		<legend class="sv-visuallyhidden">matrix</legend>
-		<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
-			<thead role="presentation">
-				<tr>
-					<td>
-					</td>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_2</span>
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row sd-table__row-readonly">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_1</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
-							<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" readonly="" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
-							<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" readonly="" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-				<tr class="sd-table__row sd-table__row-readonly">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_2</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
-							<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" readonly="" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
-							<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" readonly="" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-matrix sd-table-wrapper">
+			<fieldset role="radiogroup">
+				<legend class="sv-visuallyhidden">matrix</legend>
+				<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
+					<thead role="presentation">
+						<tr>
+							<td>
+							</td>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-viewer">col_1</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-viewer">col_2</span>
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row sd-table__row-readonly">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_1</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
+									<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" readonly="" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
+									<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" readonly="" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+						<tr class="sd-table__row sd-table__row-readonly">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_2</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
+									<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" readonly="" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
+									<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" readonly="" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrix-v2.snap.html b/tests/markup/snapshots/matrix-v2.snap.html
index eda3e28d93..8bfce4b0fb 100644
--- a/tests/markup/snapshots/matrix-v2.snap.html
+++ b/tests/markup/snapshots/matrix-v2.snap.html
@@ -1,75 +1,79 @@
-<div class="sd-matrix sd-table-wrapper">
-	<fieldset role="radiogroup">
-		<legend class="sv-visuallyhidden">matrix</legend>
-		<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
-			<thead role="presentation">
-				<tr>
-					<td>
-					</td>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_2</span>
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_1</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_2</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-matrix sd-table-wrapper">
+			<fieldset role="radiogroup">
+				<legend class="sv-visuallyhidden">matrix</legend>
+				<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
+					<thead role="presentation">
+						<tr>
+							<td>
+							</td>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-viewer">col_1</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-viewer">col_2</span>
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_1</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_2</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrix-widths.snap.html b/tests/markup/snapshots/matrix-widths.snap.html
index 00ecf88813..2041e79299 100644
--- a/tests/markup/snapshots/matrix-widths.snap.html
+++ b/tests/markup/snapshots/matrix-widths.snap.html
@@ -1,75 +1,79 @@
-<div class="sd-matrix sd-table-wrapper">
-	<fieldset role="radiogroup">
-		<legend class="sv-visuallyhidden">matrix</legend>
-		<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
-			<thead role="presentation">
-				<tr>
-					<td>
-					</td>
-					<th class="sd-table__cell sd-table__cell--header" style="min-width:20px; width:20px;">
-						<span class="sv-string-viewer">col_1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--header" style="min-width:20px; width:20px;">
-						<span class="sv-string-viewer">col_2</span>
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text" style="min-width:100px; width:100px;">
-						<span class="sv-string-viewer">row_1</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text" style="min-width:100px; width:100px;">
-						<span class="sv-string-viewer">row_2</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-matrix sd-table-wrapper">
+			<fieldset role="radiogroup">
+				<legend class="sv-visuallyhidden">matrix</legend>
+				<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
+					<thead role="presentation">
+						<tr>
+							<td>
+							</td>
+							<th class="sd-table__cell sd-table__cell--header" style="min-width:20px; width:20px;">
+								<span class="sv-string-viewer">col_1</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--header" style="min-width:20px; width:20px;">
+								<span class="sv-string-viewer">col_2</span>
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text" style="min-width:100px; width:100px;">
+								<span class="sv-string-viewer">row_1</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text" style="min-width:100px; width:100px;">
+								<span class="sv-string-viewer">row_2</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdropdown-cell-errors-bottom.snap.html b/tests/markup/snapshots/matrixdropdown-cell-errors-bottom.snap.html
index caafc75d87..1cc3c1cc5f 100644
--- a/tests/markup/snapshots/matrixdropdown-cell-errors-bottom.snap.html
+++ b/tests/markup/snapshots/matrixdropdown-cell-errors-bottom.snap.html
@@ -1,44 +1,48 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-					<span>&nbsp;</span>
-					<span class="sd-question__required-text">*</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row0">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">row1</span>
-				</td>
-				<td class="sd-question--error sd-table__cell" colspan="1" title="col1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-formbox--error sd-text">
-							<input aria-describedby="testid0row0cell1_errors" aria-invalid="true" aria-label="row row1, column col1" aria-required="true" class="sd-formbox__input" id="testid0row0cell1i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row">
-				<td class="sd-table__cell sd-table__cell--empty sd-table__cell--error" colspan="1" title="">
-				</td>
-				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-bottom" colspan="1" title="">
-					<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question" id="testid0row0cell1_errors" role="alert">
-						<div>
-							<span aria-hidden="true">
-							</span>
-							<span class="sd-error__item">
-								<span class="sv-string-viewer">Response required.</span>
-							</span>
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+							<span>&nbsp;</span>
+							<span class="sd-question__required-text">*</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row0">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">row1</span>
+						</td>
+						<td class="sd-question--error sd-table__cell" colspan="1" title="col1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-formbox--error sd-text">
+									<input aria-describedby="testid0row0cell1_errors" aria-invalid="true" aria-label="row row1, column col1" aria-required="true" class="sd-formbox__input" id="testid0row0cell1i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row">
+						<td class="sd-table__cell sd-table__cell--empty sd-table__cell--error" colspan="1" title="">
+						</td>
+						<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-bottom" colspan="1" title="">
+							<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question" id="testid0row0cell1_errors" role="alert">
+								<div>
+									<span aria-hidden="true">
+									</span>
+									<span class="sd-error__item">
+										<span class="sv-string-viewer">Response required.</span>
+									</span>
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdropdown-cell-errors-top.snap.html b/tests/markup/snapshots/matrixdropdown-cell-errors-top.snap.html
index ecca3d10bd..6dc8adfa86 100644
--- a/tests/markup/snapshots/matrixdropdown-cell-errors-top.snap.html
+++ b/tests/markup/snapshots/matrixdropdown-cell-errors-top.snap.html
@@ -1,44 +1,48 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-					<span>&nbsp;</span>
-					<span class="sd-question__required-text">*</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row">
-				<td class="sd-table__cell sd-table__cell--empty sd-table__cell--error" colspan="1" title="">
-				</td>
-				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
-					<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-element__erbox--above-element sd-error sd-question__erbox sd-question__erbox--above-question" id="testid0row1cell1_errors" role="alert">
-						<div>
-							<span aria-hidden="true">
-							</span>
-							<span class="sd-error__item">
-								<span class="sv-string-viewer">Response required.</span>
-							</span>
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">row1</span>
-				</td>
-				<td class="sd-question--error sd-table__cell" colspan="1" title="col1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-formbox--error sd-text">
-							<input aria-describedby="testid0row1cell1_errors" aria-invalid="true" aria-label="row row1, column col1" aria-required="true" class="sd-formbox__input" id="testid0row1cell1i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" data-sv-drop-target-matrix="testid0row1" data-sv-drop-target-matrix-row="testid0row1" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+							<span>&nbsp;</span>
+							<span class="sd-question__required-text">*</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row">
+						<td class="sd-table__cell sd-table__cell--empty sd-table__cell--error" colspan="1" title="">
+						</td>
+						<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
+							<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-element__erbox--above-element sd-error sd-question__erbox sd-question__erbox--above-question" id="testid0row1cell1_errors" role="alert">
+								<div>
+									<span aria-hidden="true">
+									</span>
+									<span class="sd-error__item">
+										<span class="sv-string-viewer">Response required.</span>
+									</span>
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">row1</span>
+						</td>
+						<td class="sd-question--error sd-table__cell" colspan="1" title="col1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-formbox--error sd-text">
+									<input aria-describedby="testid0row1cell1_errors" aria-invalid="true" aria-label="row row1, column col1" aria-required="true" class="sd-formbox__input" id="testid0row1cell1i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdropdown-disabled.snap.html b/tests/markup/snapshots/matrixdropdown-disabled.snap.html
index 3be0085116..c4f40e2c57 100644
--- a/tests/markup/snapshots/matrixdropdown-disabled.snap.html
+++ b/tests/markup/snapshots/matrixdropdown-disabled.snap.html
@@ -1,56 +1,60 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header sd-table__cell--text">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-editor" contenteditable="true">question1</span>
-				</th>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-editor" contenteditable="true">question2</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-editor" contenteditable="true">Row 1</span>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 1, column question1" aria-required="false" class="sd-formbox__input" disabled="" id="testid0row1cell1i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question2">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 1, column question2" aria-required="false" class="sd-formbox__input" disabled="" id="testid0row1cell2i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row3">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-editor" contenteditable="true">Row 2</span>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 2, column question1" aria-required="false" class="sd-formbox__input" disabled="" id="testid0row3cell1i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question2">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 2, column question2" aria-required="false" class="sd-formbox__input" disabled="" id="testid0row3cell2i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" data-sv-drop-target-matrix="testid0row3" data-sv-drop-target-matrix-row="testid0row3" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header sd-table__cell--text">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-editor" contenteditable="true">question1</span>
+						</th>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-editor" contenteditable="true">question2</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-editor" contenteditable="true">Row 1</span>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 1, column question1" aria-required="false" class="sd-formbox__input" disabled="" id="testid0row1cell1i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question2">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 1, column question2" aria-required="false" class="sd-formbox__input" disabled="" id="testid0row1cell2i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row3">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-editor" contenteditable="true">Row 2</span>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 2, column question1" aria-required="false" class="sd-formbox__input" disabled="" id="testid0row3cell1i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question2">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 2, column question2" aria-required="false" class="sd-formbox__input" disabled="" id="testid0row3cell2i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdropdown-hidden-question-mobile.snap.html b/tests/markup/snapshots/matrixdropdown-hidden-question-mobile.snap.html
index aed153880f..717a144622 100644
--- a/tests/markup/snapshots/matrixdropdown-hidden-question-mobile.snap.html
+++ b/tests/markup/snapshots/matrixdropdown-hidden-question-mobile.snap.html
@@ -1,64 +1,68 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-				</th>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row0">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">row1</span>
-				</td>
-				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
-				</td>
-				<td class="sd-question--answered sd-table__cell" colspan="1" title="col1">
-					<span class="sd-table__responsive-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-					</span>
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row row1, column col1" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row0cell2i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
-				</td>
-				<td class="sd-question--answered sd-table__cell" colspan="1" title="col1">
-					<span class="sd-table__responsive-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-					</span>
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row row1, column col1" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row0cell4i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">row2</span>
-				</td>
-				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
-				</td>
-				<td class="sd-table__cell" colspan="1" title="col1">
-					<span class="sd-table__responsive-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-					</span>
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row row2, column col1" aria-required="false" class="sd-formbox__input" id="testid0row1cell2i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" data-sv-drop-target-matrix="testid0row1" data-sv-drop-target-matrix-row="testid0row1" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+						</th>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row0">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">row1</span>
+						</td>
+						<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
+						</td>
+						<td class="sd-question--answered sd-table__cell" colspan="1" title="col1">
+							<span class="sd-table__responsive-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+							</span>
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row row1, column col1" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row0cell2i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
+						</td>
+						<td class="sd-question--answered sd-table__cell" colspan="1" title="col1">
+							<span class="sd-table__responsive-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+							</span>
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row row1, column col1" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row0cell4i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">row2</span>
+						</td>
+						<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
+						</td>
+						<td class="sd-table__cell" colspan="1" title="col1">
+							<span class="sd-table__responsive-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+							</span>
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row row2, column col1" aria-required="false" class="sd-formbox__input" id="testid0row1cell2i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdropdown-readonly.snap.html b/tests/markup/snapshots/matrixdropdown-readonly.snap.html
index 76d69f1374..4a18010aff 100644
--- a/tests/markup/snapshots/matrixdropdown-readonly.snap.html
+++ b/tests/markup/snapshots/matrixdropdown-readonly.snap.html
@@ -1,56 +1,60 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header sd-table__cell--text">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">question1</span>
-				</th>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">question2</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">Row 1</span>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-formbox--readonly sd-text">
-							<input aria-invalid="false" aria-label="row Row 1, column question1" aria-required="false" class="sd-formbox__input" id="testid0row1cell1i" readonly="" type="text">
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question2">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-formbox--readonly sd-text">
-							<input aria-invalid="false" aria-label="row Row 1, column question2" aria-required="false" class="sd-formbox__input" id="testid0row1cell2i" readonly="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row3">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">Row 2</span>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-formbox--readonly sd-text">
-							<input aria-invalid="false" aria-label="row Row 2, column question1" aria-required="false" class="sd-formbox__input" id="testid0row3cell1i" readonly="" type="text">
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question2">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-formbox--readonly sd-text">
-							<input aria-invalid="false" aria-label="row Row 2, column question2" aria-required="false" class="sd-formbox__input" id="testid0row3cell2i" readonly="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" data-sv-drop-target-matrix="testid0row3" data-sv-drop-target-matrix-row="testid0row3" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header sd-table__cell--text">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">question1</span>
+						</th>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">question2</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">Row 1</span>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-formbox--readonly sd-text">
+									<input aria-invalid="false" aria-label="row Row 1, column question1" aria-required="false" class="sd-formbox__input" id="testid0row1cell1i" readonly="" type="text">
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question2">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-formbox--readonly sd-text">
+									<input aria-invalid="false" aria-label="row Row 1, column question2" aria-required="false" class="sd-formbox__input" id="testid0row1cell2i" readonly="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row3">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">Row 2</span>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-formbox--readonly sd-text">
+									<input aria-invalid="false" aria-label="row Row 2, column question1" aria-required="false" class="sd-formbox__input" id="testid0row3cell1i" readonly="" type="text">
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question2">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-formbox--readonly sd-text">
+									<input aria-invalid="false" aria-label="row Row 2, column question2" aria-required="false" class="sd-formbox__input" id="testid0row3cell2i" readonly="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdropdown-vertical.snap.html b/tests/markup/snapshots/matrixdropdown-vertical.snap.html
index 791ac33ae3..18855db0b4 100644
--- a/tests/markup/snapshots/matrixdropdown-vertical.snap.html
+++ b/tests/markup/snapshots/matrixdropdown-vertical.snap.html
@@ -1,56 +1,60 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--empty sd-table__cell--header sd-table__cell--text">
-				</td>
-				<th class="sd-table__cell sd-table__cell--header">
-					<span class="sv-string-viewer">Row 1</span>
-				</th>
-				<th class="sd-table__cell sd-table__cell--header">
-					<span class="sv-string-viewer">Row 2</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row sd-table__row--expanded sd-table__row--has-panel">
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer sv-string-viewer--multiline">question1</span>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 1, column question1" aria-required="false" class="sd-formbox__input" id="testid0row1cell1i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 2, column question1" aria-required="false" class="sd-formbox__input" id="testid0row1cell2i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row sd-table__row--expanded sd-table__row--has-panel">
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer sv-string-viewer--multiline">question2</span>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question2">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 1, column question2" aria-required="false" class="sd-formbox__input" id="testid0row3cell1i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question2">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 2, column question2" aria-required="false" class="sd-formbox__input" id="testid0row3cell2i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--empty sd-table__cell--header sd-table__cell--text">
+						</td>
+						<th class="sd-table__cell sd-table__cell--header">
+							<span class="sv-string-viewer">Row 1</span>
+						</th>
+						<th class="sd-table__cell sd-table__cell--header">
+							<span class="sv-string-viewer">Row 2</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row sd-table__row--expanded sd-table__row--has-panel">
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer sv-string-viewer--multiline">question1</span>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 1, column question1" aria-required="false" class="sd-formbox__input" id="testid0row1cell1i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 2, column question1" aria-required="false" class="sd-formbox__input" id="testid0row1cell2i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row sd-table__row--expanded sd-table__row--has-panel">
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer sv-string-viewer--multiline">question2</span>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question2">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 1, column question2" aria-required="false" class="sd-formbox__input" id="testid0row3cell1i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question2">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 2, column question2" aria-required="false" class="sd-formbox__input" id="testid0row3cell2i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdropdown.snap.html b/tests/markup/snapshots/matrixdropdown.snap.html
index bcf616ac3b..f54d55ac12 100644
--- a/tests/markup/snapshots/matrixdropdown.snap.html
+++ b/tests/markup/snapshots/matrixdropdown.snap.html
@@ -1,56 +1,60 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header sd-table__cell--text">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">question1</span>
-				</th>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">question2</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">Row 1</span>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 1, column question1" aria-required="false" class="sd-formbox__input" id="testid0row1cell1i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question2">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 1, column question2" aria-required="false" class="sd-formbox__input" id="testid0row1cell2i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row3">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">Row 2</span>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 2, column question1" aria-required="false" class="sd-formbox__input" id="testid0row3cell1i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question2">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 2, column question2" aria-required="false" class="sd-formbox__input" id="testid0row3cell2i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" data-sv-drop-target-matrix="testid0row3" data-sv-drop-target-matrix-row="testid0row3" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header sd-table__cell--text">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">question1</span>
+						</th>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">question2</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">Row 1</span>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 1, column question1" aria-required="false" class="sd-formbox__input" id="testid0row1cell1i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question2">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 1, column question2" aria-required="false" class="sd-formbox__input" id="testid0row1cell2i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row3">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">Row 2</span>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 2, column question1" aria-required="false" class="sd-formbox__input" id="testid0row3cell1i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question2">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 2, column question2" aria-required="false" class="sd-formbox__input" id="testid0row3cell2i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdynamic-add-row-icon.snap.html b/tests/markup/snapshots/matrixdynamic-add-row-icon.snap.html
index 31b557b056..914fb5aac9 100644
--- a/tests/markup/snapshots/matrixdynamic-add-row-icon.snap.html
+++ b/tests/markup/snapshots/matrixdynamic-add-row-icon.snap.html
@@ -1,79 +1,83 @@
-<div>
-	<div class="sd-table-wrapper">
-		<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
-			<thead>
-				<tr>
-					<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Column 1</span>
-					</th>
-					<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
-					</td>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row1">
-					<td class="sd-table__cell" colspan="1" title="Column 1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-formbox sd-text">
-								<input aria-invalid="false" aria-label="row 1, column Column 1" aria-required="false" class="sd-formbox__input" id="testid0row1cell0i" placeholder="" type="text">
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-matrixdynamic__content sd-question__content" data-sv-drop-target-matrix="testid0row3" data-sv-drop-target-matrix-row="testid0row3" role="presentation">
+		<div>
+			<div class="sd-table-wrapper">
+				<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
+					<thead>
+						<tr>
+							<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Column 1</span>
+							</th>
+							<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
+							</td>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row1">
+							<td class="sd-table__cell" colspan="1" title="Column 1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-formbox sd-text">
+										<input aria-invalid="false" aria-label="row 1, column Column 1" aria-required="false" class="sd-formbox__input" id="testid0row1cell0i" placeholder="" type="text">
+									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-				</tr>
-				<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row3">
-					<td class="sd-table__cell" colspan="1" title="Column 1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-formbox sd-text">
-								<input aria-invalid="false" aria-label="row 2, column Column 1" aria-required="false" class="sd-formbox__input" id="testid0row3cell0i" placeholder="" type="text">
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
+										</div>
+									</div>
+								</div>
+							</td>
+						</tr>
+						<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row3">
+							<td class="sd-table__cell" colspan="1" title="Column 1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-formbox sd-text">
+										<input aria-invalid="false" aria-label="row 2, column Column 1" aria-required="false" class="sd-formbox__input" id="testid0row3cell0i" placeholder="" type="text">
+									</div>
 								</div>
-							</div>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
+										</div>
+									</div>
+								</div>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<div class="sd-matrixdynamic__footer">
+				<div class="sd-action-bar sd-action-bar--default-size">
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
+									<use xlink:href="#icon-#test" class="">
+									</use>
+									<title class="">Add Row</title>
+								</svg>
+								<span class="sd-action__title">Add Row</span>
+							</button>
 						</div>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</div>
-	<div class="sd-matrixdynamic__footer">
-		<div class="sd-action-bar sd-action-bar--default-size">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
-							<use xlink:href="#icon-#test" class="">
-							</use>
-							<title class="">Add Row</title>
-						</svg>
-						<span class="sd-action__title">Add Row</span>
-					</button>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/matrixdynamic-default.snap.html b/tests/markup/snapshots/matrixdynamic-default.snap.html
index dbc99620b2..2d113aa67c 100644
--- a/tests/markup/snapshots/matrixdynamic-default.snap.html
+++ b/tests/markup/snapshots/matrixdynamic-default.snap.html
@@ -1,56 +1,60 @@
-<div>
-	<div class="sd-table-wrapper">
-		<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
-			<thead>
-				<tr>
-					<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Column 1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Column 2</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Column 3</span>
-					</th>
-					<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
-					</td>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row1">
-					<td class="sd-table__cell" colspan="1" title="Column 1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell0i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-matrixdynamic__content sd-question__content" data-sv-drop-target-matrix="testid0row3" data-sv-drop-target-matrix-row="testid0row3" role="presentation">
+		<div>
+			<div class="sd-table-wrapper">
+				<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
+					<thead>
+						<tr>
+							<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Column 1</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Column 2</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Column 3</span>
+							</th>
+							<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
+							</td>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row1">
+							<td class="sd-table__cell" colspan="1" title="Column 1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell0i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -60,42 +64,42 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="Column 2">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell1i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row1cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 2" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="Column 2">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell1i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row1cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 2" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -105,42 +109,42 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="Column 3">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell2i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row1cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 3" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="Column 3">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell2i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row1cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 3" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -150,59 +154,59 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
-								</div>
-							</div>
-						</div>
-					</td>
-				</tr>
-				<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row3">
-					<td class="sd-table__cell" colspan="1" title="Column 1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell0i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
 										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+									</div>
+								</div>
+							</td>
+						</tr>
+						<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row3">
+							<td class="sd-table__cell" colspan="1" title="Column 1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell0i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -212,42 +216,42 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="Column 2">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell1i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row3cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 2" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="Column 2">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell1i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row3cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 2" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -257,42 +261,42 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="Column 3">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell2i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row3cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 3" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="Column 3">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell2i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row3cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 3" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -302,35 +306,35 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
+										</div>
+									</div>
 								</div>
-							</div>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<div class="sd-matrixdynamic__footer">
+				<div class="sd-action-bar sd-action-bar--default-size">
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
+								<span class="sd-action__title">Add Row</span>
+							</button>
 						</div>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</div>
-	<div class="sd-matrixdynamic__footer">
-		<div class="sd-action-bar sd-action-bar--default-size">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
-						<span class="sd-action__title">Add Row</span>
-					</button>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/matrixdynamic-defaultV2.snap.html b/tests/markup/snapshots/matrixdynamic-defaultV2.snap.html
index dbc99620b2..2d113aa67c 100644
--- a/tests/markup/snapshots/matrixdynamic-defaultV2.snap.html
+++ b/tests/markup/snapshots/matrixdynamic-defaultV2.snap.html
@@ -1,56 +1,60 @@
-<div>
-	<div class="sd-table-wrapper">
-		<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
-			<thead>
-				<tr>
-					<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Column 1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Column 2</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Column 3</span>
-					</th>
-					<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
-					</td>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row1">
-					<td class="sd-table__cell" colspan="1" title="Column 1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell0i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-matrixdynamic__content sd-question__content" data-sv-drop-target-matrix="testid0row3" data-sv-drop-target-matrix-row="testid0row3" role="presentation">
+		<div>
+			<div class="sd-table-wrapper">
+				<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
+					<thead>
+						<tr>
+							<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Column 1</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Column 2</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Column 3</span>
+							</th>
+							<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
+							</td>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row1">
+							<td class="sd-table__cell" colspan="1" title="Column 1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell0i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -60,42 +64,42 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="Column 2">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell1i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row1cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 2" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="Column 2">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell1i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row1cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 2" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -105,42 +109,42 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="Column 3">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell2i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row1cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 3" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="Column 3">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell2i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row1cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 3" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -150,59 +154,59 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
-								</div>
-							</div>
-						</div>
-					</td>
-				</tr>
-				<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row3">
-					<td class="sd-table__cell" colspan="1" title="Column 1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell0i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
 										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+									</div>
+								</div>
+							</td>
+						</tr>
+						<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row3">
+							<td class="sd-table__cell" colspan="1" title="Column 1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell0i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -212,42 +216,42 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="Column 2">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell1i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row3cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 2" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="Column 2">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell1i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row3cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 2" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -257,42 +261,42 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="Column 3">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell2i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row3cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 3" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="Column 3">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell2i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row3cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 3" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -302,35 +306,35 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
+										</div>
+									</div>
 								</div>
-							</div>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<div class="sd-matrixdynamic__footer">
+				<div class="sd-action-bar sd-action-bar--default-size">
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
+								<span class="sd-action__title">Add Row</span>
+							</button>
 						</div>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</div>
-	<div class="sd-matrixdynamic__footer">
-		<div class="sd-action-bar sd-action-bar--default-size">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
-						<span class="sd-action__title">Add Row</span>
-					</button>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/matrixdynamic-detail.snap.html b/tests/markup/snapshots/matrixdynamic-detail.snap.html
index cfbf49a6a8..b91de70043 100644
--- a/tests/markup/snapshots/matrixdynamic-detail.snap.html
+++ b/tests/markup/snapshots/matrixdynamic-detail.snap.html
@@ -1,123 +1,131 @@
-<div>
-	<div class="sd-table-wrapper">
-		<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
-			<thead>
-				<tr>
-					<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
-					</td>
-					<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--html">
-						<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
-					</th>
-					<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
-					</td>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row sd-table__row--expanded sd-table__row--has-end-actions sd-table__row--has-panel" data-sv-drop-target-matrix-row="testid0row2">
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--show-detail" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item">
-								<div class="sd-action-bar__item-content">
-									<button aria-expanded="true" class="sd-action sd-action--brand sd-action--quaternary sd-action--small sd-table__cell--detail-button" role="button" tabindex="0" title="Hide Details" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-collapsedetails-16x16" class="">
-											</use>
-											<title class="">Hide Details</title>
-										</svg>
-									</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-matrixdynamic__content sd-question__content" data-sv-drop-target-matrix="testid0row4" data-sv-drop-target-matrix-row="testid0row4" role="presentation">
+		<div>
+			<div class="sd-table-wrapper">
+				<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
+					<thead>
+						<tr>
+							<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
+							</td>
+							<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--html">
+								<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
+							</th>
+							<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
+							</td>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row sd-table__row--expanded sd-table__row--has-end-actions sd-table__row--has-panel" data-sv-drop-target-matrix-row="testid0row2">
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--show-detail" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item">
+										<div class="sd-action-bar__item-content">
+											<button aria-expanded="true" class="sd-action sd-action--brand sd-action--quaternary sd-action--small sd-table__cell--detail-button" role="button" tabindex="0" title="Hide Details" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-collapsedetails-16x16" class="">
+													</use>
+													<title class="">Hide Details</title>
+												</svg>
+											</button>
+										</div>
+									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="q1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-element--nested sd-html sd-html--nested">test</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="q1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-element--nested sd-html sd-html--nested">test</div>
 								</div>
-							</div>
-						</div>
-					</td>
-				</tr>
-				<tr class="sd-table__row sd-table__row--detail sd-table__row--has-panel" data-sv-drop-target-matrix-row="testid0row2">
-					<td colspan="1" title="">
-					</td>
-					<td class="sd-table__cell--detail-panel" colspan="1" title="">
-						<div class="sd-element sd-element--complex sd-panel sd-row__panel" id="testid0row2cell1detailPanel">
-							<div class="sd-element__content sd-panel__content" id="testid0row2cell1detailPanel_content" role="group">
-								<div class="sd-clearfix sd-row">
-									<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-										<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="detail-question" id="testid0row2cell1detailPanel_question0">
-											<div class="sd-element__content sd-question__content" role="presentation">
-												<div class="sd-element--nested sd-html sd-html--nested">test</div>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
+										</div>
+									</div>
+								</div>
+							</td>
+						</tr>
+						<tr class="sd-table__row sd-table__row--detail sd-table__row--has-panel" data-sv-drop-target-matrix-row="testid0row2">
+							<td colspan="1" title="">
+							</td>
+							<td class="sd-table__cell--detail-panel" colspan="1" title="">
+								<div class="sd-element sd-element--complex sd-panel sd-row__panel" id="testid0row2cell1detailPanel">
+									<div class="sd-element__content sd-panel__content" id="testid0row2cell1detailPanel_content" role="group">
+										<div class="sd-clearfix sd-row">
+											<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+												<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="detail-question" id="testid0row2cell1detailPanel_question0">
+													<div class="sd-question__container">
+														<div class="sd-question__header-and-content-container">
+															<div class="sd-element__content sd-question__content" role="presentation">
+																<div class="sd-element--nested sd-html sd-html--nested">test</div>
+															</div>
+														</div>
+													</div>
+												</div>
 											</div>
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td colspan="1" title="">
-					</td>
-				</tr>
-				<tr class="sd-table__row sd-table__row--has-end-actions sd-table__row--has-panel" data-sv-drop-target-matrix-row="testid0row4">
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--show-detail" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item">
-								<div class="sd-action-bar__item-content">
-									<button aria-expanded="false" class="sd-action sd-action--brand sd-action--quaternary sd-action--small sd-table__cell--detail-button" role="button" tabindex="0" title="Show Details" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-expanddetails-16x16" class="">
-											</use>
-											<title class="">Show Details</title>
-										</svg>
-									</button>
+							</td>
+							<td colspan="1" title="">
+							</td>
+						</tr>
+						<tr class="sd-table__row sd-table__row--has-end-actions sd-table__row--has-panel" data-sv-drop-target-matrix-row="testid0row4">
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--show-detail" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item">
+										<div class="sd-action-bar__item-content">
+											<button aria-expanded="false" class="sd-action sd-action--brand sd-action--quaternary sd-action--small sd-table__cell--detail-button" role="button" tabindex="0" title="Show Details" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-expanddetails-16x16" class="">
+													</use>
+													<title class="">Show Details</title>
+												</svg>
+											</button>
+										</div>
+									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="q1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-element--nested sd-html sd-html--nested">test</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="q1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-element--nested sd-html sd-html--nested">test</div>
 								</div>
-							</div>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
+										</div>
+									</div>
+								</div>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<div class="sd-matrixdynamic__footer">
+				<div class="sd-action-bar sd-action-bar--default-size">
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
+								<span class="sd-action__title">Add Row</span>
+							</button>
 						</div>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</div>
-	<div class="sd-matrixdynamic__footer">
-		<div class="sd-action-bar sd-action-bar--default-size">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
-						<span class="sd-action__title">Add Row</span>
-					</button>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns-mobile.snap.html b/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns-mobile.snap.html
index a2b96a838d..32c7cb2eee 100644
--- a/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns-mobile.snap.html
+++ b/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns-mobile.snap.html
@@ -1,96 +1,100 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--radiogroup">
-					<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-					<span>&nbsp;</span>
-					<span class="sd-question__required-text">*</span>
-				</th>
-				<th class="sd-table__cell sd-table__cell--checkbox sd-table__cell--column-title sd-table__cell--header">
-					<span class="sv-string-viewer sv-string-viewer--multiline">col2</span>
-					<span>&nbsp;</span>
-					<span class="sd-question__required-text">*</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row0">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">row1</span>
-				</td>
-				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
-				</td>
-				<td class="sd-table__cell" colspan="1" title="col1">
-					<span class="sd-table__responsive-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-						<span>&nbsp;</span>
-						<span class="sd-question__required-text">*</span>
-					</span>
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<fieldset aria-invalid="false" aria-label="row row1, column col1" aria-required="true" class="sd-selectbase sd-selectbase--mobile sd-selectbase--row" role="radiogroup">
-							<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-								<label class="sd-selectbase__label">
-									<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0row0cell2i_0" name="col1_testid0row0cell2" type="radio" value="Item 1">
-									<span class="sd-item__decorator sd-radio__decorator">
-										<svg class="sd-item__svg sd-radio__svg">
-											<use xlink:href="#icon-radio-16x16" class="">
-											</use>
-										</svg>
-									</span>
-									<span class="sd-item__control-label">
-										<span class="sv-string-viewer">Item 1</span>
-									</span>
-								</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" data-sv-drop-target-matrix="testid0row0" data-sv-drop-target-matrix-row="testid0row0" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--radiogroup">
+							<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+							<span>&nbsp;</span>
+							<span class="sd-question__required-text">*</span>
+						</th>
+						<th class="sd-table__cell sd-table__cell--checkbox sd-table__cell--column-title sd-table__cell--header">
+							<span class="sv-string-viewer sv-string-viewer--multiline">col2</span>
+							<span>&nbsp;</span>
+							<span class="sd-question__required-text">*</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row0">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">row1</span>
+						</td>
+						<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
+						</td>
+						<td class="sd-table__cell" colspan="1" title="col1">
+							<span class="sd-table__responsive-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+								<span>&nbsp;</span>
+								<span class="sd-question__required-text">*</span>
+							</span>
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<fieldset aria-invalid="false" aria-label="row row1, column col1" aria-required="true" class="sd-selectbase sd-selectbase--mobile sd-selectbase--row" role="radiogroup">
+									<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+										<label class="sd-selectbase__label">
+											<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0row0cell2i_0" name="col1_testid0row0cell2" type="radio" value="Item 1">
+											<span class="sd-item__decorator sd-radio__decorator">
+												<svg class="sd-item__svg sd-radio__svg">
+													<use xlink:href="#icon-radio-16x16" class="">
+													</use>
+												</svg>
+											</span>
+											<span class="sd-item__control-label">
+												<span class="sv-string-viewer">Item 1</span>
+											</span>
+										</label>
+									</div>
+								</fieldset>
 							</div>
-						</fieldset>
-					</div>
-				</td>
-				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
-				</td>
-				<td class="sd-table__cell" colspan="1" title="col2">
-					<span class="sd-table__responsive-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">col2</span>
-						<span>&nbsp;</span>
-						<span class="sd-question__required-text">*</span>
-					</span>
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<fieldset aria-invalid="false" aria-label="row row1, column col2" class="sd-selectbase sd-selectbase--mobile sd-selectbase--row" role="group">
-							<legend class="sv-hidden">row row1, column col2</legend>
-							<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-								<label class="sd-selectbase__label">
-									<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row0cell4i_0" name="col2Item 1" required="" type="checkbox" value="Item 1">
-									<span class="sd-checkbox__decorator sd-item__decorator">
-										<svg class="sd-checkbox__svg sd-item__svg">
-											<use xlink:href="#icon-check-16x16" class="">
-											</use>
-										</svg>
-									</span>
-									<span class="sd-item__control-label">
-										<span class="sv-string-viewer">Item 1</span>
-									</span>
-								</label>
+						</td>
+						<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
+						</td>
+						<td class="sd-table__cell" colspan="1" title="col2">
+							<span class="sd-table__responsive-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">col2</span>
+								<span>&nbsp;</span>
+								<span class="sd-question__required-text">*</span>
+							</span>
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<fieldset aria-invalid="false" aria-label="row row1, column col2" class="sd-selectbase sd-selectbase--mobile sd-selectbase--row" role="group">
+									<legend class="sv-hidden">row row1, column col2</legend>
+									<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+										<label class="sd-selectbase__label">
+											<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row0cell4i_0" name="col2Item 1" required="" type="checkbox" value="Item 1">
+											<span class="sd-checkbox__decorator sd-item__decorator">
+												<svg class="sd-checkbox__svg sd-item__svg">
+													<use xlink:href="#icon-check-16x16" class="">
+													</use>
+												</svg>
+											</span>
+											<span class="sd-item__control-label">
+												<span class="sv-string-viewer">Item 1</span>
+											</span>
+										</label>
+									</div>
+									<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+										<label class="sd-selectbase__label">
+											<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row0cell4i_1" name="col2Item 2" required="" type="checkbox" value="Item 2">
+											<span class="sd-checkbox__decorator sd-item__decorator">
+												<svg class="sd-checkbox__svg sd-item__svg">
+													<use xlink:href="#icon-check-16x16" class="">
+													</use>
+												</svg>
+											</span>
+											<span class="sd-item__control-label">
+												<span class="sv-string-viewer">Item 2</span>
+											</span>
+										</label>
+									</div>
+								</fieldset>
 							</div>
-							<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-								<label class="sd-selectbase__label">
-									<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row0cell4i_1" name="col2Item 2" required="" type="checkbox" value="Item 2">
-									<span class="sd-checkbox__decorator sd-item__decorator">
-										<svg class="sd-checkbox__svg sd-item__svg">
-											<use xlink:href="#icon-check-16x16" class="">
-											</use>
-										</svg>
-									</span>
-									<span class="sd-item__control-label">
-										<span class="sv-string-viewer">Item 2</span>
-									</span>
-								</label>
-							</div>
-						</fieldset>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns.snap.html b/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns.snap.html
index 6b69758c98..d9ad3383f8 100644
--- a/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns.snap.html
+++ b/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns.snap.html
@@ -1,71 +1,75 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header">
-					<span class="sv-string-viewer">Item 1</span>
-				</th>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header">
-					<span class="sv-string-viewer">Item 1</span>
-				</th>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header">
-					<span class="sv-string-viewer">Item 2</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">row1</span>
-				</td>
-				<td class="sd-table__cell sd-table__cell--item" colspan="1" title="Item 1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-							<label class="sd-selectbase__label">
-								<input aria-label="row row1, column col1" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0row1cell1i_0" name="col1_testid0row1cell1" type="radio" value="Item 1">
-								<span class="sd-item__decorator sd-radio__decorator">
-									<svg class="sd-item__svg sd-radio__svg">
-										<use xlink:href="#icon-radio-16x16" class="">
-										</use>
-									</svg>
-								</span>
-							</label>
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell sd-table__cell--item" colspan="1" title="Item 1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-							<label class="sd-selectbase__label">
-								<input aria-label="row row1, column col2" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row1cell3i_0" name="col2Item 1" required="" type="checkbox" value="Item 1">
-								<span class="sd-checkbox__decorator sd-item__decorator">
-									<svg class="sd-checkbox__svg sd-item__svg">
-										<use xlink:href="#icon-check-16x16" class="">
-										</use>
-									</svg>
-								</span>
-							</label>
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell sd-table__cell--item" colspan="1" title="Item 2">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-							<label class="sd-selectbase__label">
-								<input aria-label="row row1, column col2" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row1cell3i_1" name="col2Item 2" required="" type="checkbox" value="Item 2">
-								<span class="sd-checkbox__decorator sd-item__decorator">
-									<svg class="sd-checkbox__svg sd-item__svg">
-										<use xlink:href="#icon-check-16x16" class="">
-										</use>
-									</svg>
-								</span>
-							</label>
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" data-sv-drop-target-matrix="testid0row1" data-sv-drop-target-matrix-row="testid0row1" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header">
+							<span class="sv-string-viewer">Item 1</span>
+						</th>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header">
+							<span class="sv-string-viewer">Item 1</span>
+						</th>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header">
+							<span class="sv-string-viewer">Item 2</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">row1</span>
+						</td>
+						<td class="sd-table__cell sd-table__cell--item" colspan="1" title="Item 1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+									<label class="sd-selectbase__label">
+										<input aria-label="row row1, column col1" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0row1cell1i_0" name="col1_testid0row1cell1" type="radio" value="Item 1">
+										<span class="sd-item__decorator sd-radio__decorator">
+											<svg class="sd-item__svg sd-radio__svg">
+												<use xlink:href="#icon-radio-16x16" class="">
+												</use>
+											</svg>
+										</span>
+									</label>
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell sd-table__cell--item" colspan="1" title="Item 1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+									<label class="sd-selectbase__label">
+										<input aria-label="row row1, column col2" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row1cell3i_0" name="col2Item 1" required="" type="checkbox" value="Item 1">
+										<span class="sd-checkbox__decorator sd-item__decorator">
+											<svg class="sd-checkbox__svg sd-item__svg">
+												<use xlink:href="#icon-check-16x16" class="">
+												</use>
+											</svg>
+										</span>
+									</label>
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell sd-table__cell--item" colspan="1" title="Item 2">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+									<label class="sd-selectbase__label">
+										<input aria-label="row row1, column col2" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row1cell3i_1" name="col2Item 2" required="" type="checkbox" value="Item 2">
+										<span class="sd-checkbox__decorator sd-item__decorator">
+											<svg class="sd-checkbox__svg sd-item__svg">
+												<use xlink:href="#icon-check-16x16" class="">
+												</use>
+											</svg>
+										</span>
+									</label>
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdynamic-totals.snap.html b/tests/markup/snapshots/matrixdynamic-totals.snap.html
index f951609de6..77db981662 100644
--- a/tests/markup/snapshots/matrixdynamic-totals.snap.html
+++ b/tests/markup/snapshots/matrixdynamic-totals.snap.html
@@ -1,50 +1,54 @@
-<div>
-	<div class="sd-table-wrapper">
-		<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
-			<thead>
-				<tr>
-					<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Column 1</span>
-					</th>
-					<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
-					</td>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row1">
-					<td class="sd-table__cell" colspan="1" title="Column 1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-matrixdynamic__content sd-question__content" data-sv-drop-target-matrix="testid0row3" data-sv-drop-target-matrix-row="testid0row3" role="presentation">
+		<div>
+			<div class="sd-table-wrapper">
+				<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
+					<thead>
+						<tr>
+							<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Column 1</span>
+							</th>
+							<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
+							</td>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row1">
+							<td class="sd-table__cell" colspan="1" title="Column 1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -54,59 +58,59 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
-								</div>
-							</div>
-						</div>
-					</td>
-				</tr>
-				<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row3">
-					<td class="sd-table__cell" colspan="1" title="Column 1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
 										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+									</div>
+								</div>
+							</td>
+						</tr>
+						<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row3">
+							<td class="sd-table__cell" colspan="1" title="Column 1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -116,46 +120,46 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
+										</div>
+									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-				</tr>
-			</tbody>
-			<tfoot>
-				<tr>
-					<td class="sd-question--answered sd-table__cell sd-table__cell--footer" colspan="1" title="Column 1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper sd-table__question-wrapper--auto sd-table__question-wrapper--expression">
-							<div aria-label="Count: 0" aria-live="polite" class="sd-expression">Count: 0</div>
+							</td>
+						</tr>
+					</tbody>
+					<tfoot>
+						<tr>
+							<td class="sd-question--answered sd-table__cell sd-table__cell--footer" colspan="1" title="Column 1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper sd-table__question-wrapper--auto sd-table__question-wrapper--expression">
+									<div aria-label="Count: 0" aria-live="polite" class="sd-expression">Count: 0</div>
+								</div>
+							</td>
+							<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header" colspan="1" title="">
+							</td>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+			<div class="sd-matrixdynamic__footer">
+				<div class="sd-action-bar sd-action-bar--default-size">
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
+								<span class="sd-action__title">Add Row</span>
+							</button>
 						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header" colspan="1" title="">
-					</td>
-				</tr>
-			</tfoot>
-		</table>
-	</div>
-	<div class="sd-matrixdynamic__footer">
-		<div class="sd-action-bar sd-action-bar--default-size">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
-						<span class="sd-action__title">Add Row</span>
-					</button>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/multipletext-disabled.snap.html b/tests/markup/snapshots/multipletext-disabled.snap.html
index 0a1b7ecf2c..0883cb522f 100644
--- a/tests/markup/snapshots/multipletext-disabled.snap.html
+++ b/tests/markup/snapshots/multipletext-disabled.snap.html
@@ -1,56 +1,60 @@
-<table class="sd-multipletext">
-	<tbody>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-multipletext__item-container">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-editor" contenteditable="true">Text 1</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="Text 1" aria-required="false" class="sd-formbox__input" disabled="" placeholder="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-multipletext__item-container">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-editor" contenteditable="true">Text 2</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="Text 2" aria-required="false" class="sd-formbox__input" disabled="" placeholder="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-		</tr>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-multipletext__item-container">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-editor" contenteditable="true">Text 3</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="Text 3" aria-required="false" class="sd-formbox__input" disabled="" placeholder="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-multipletext__item-container">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-editor" contenteditable="true">Text 4</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="Text 4" aria-required="false" class="sd-formbox__input" disabled="" placeholder="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-		</tr>
-	</tbody>
-</table>
\ No newline at end of file
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--multipletext" role="presentation">
+		<table class="sd-multipletext">
+			<tbody>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-multipletext__item-container">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-editor" contenteditable="true">Text 1</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="Text 1" aria-required="false" class="sd-formbox__input" disabled="" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-multipletext__item-container">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-editor" contenteditable="true">Text 2</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="Text 2" aria-required="false" class="sd-formbox__input" disabled="" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+				</tr>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-multipletext__item-container">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-editor" contenteditable="true">Text 3</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="Text 3" aria-required="false" class="sd-formbox__input" disabled="" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-multipletext__item-container">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-editor" contenteditable="true">Text 4</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="Text 4" aria-required="false" class="sd-formbox__input" disabled="" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/multipletext-error-bottom-v2.snap.html b/tests/markup/snapshots/multipletext-error-bottom-v2.snap.html
index 1501a9fc48..3d35dd07da 100644
--- a/tests/markup/snapshots/multipletext-error-bottom-v2.snap.html
+++ b/tests/markup/snapshots/multipletext-error-bottom-v2.snap.html
@@ -1,33 +1,37 @@
-<table class="sd-multipletext">
-	<tbody>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-formbox--error sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 1</span>
-						<span>&nbsp;</span>
-						<span aria-hidden="true" class="sd-question__required-text">*</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-formbox--error sd-text">
-							<input aria-invalid="true" aria-label="Text 1" aria-required="true" class="sd-formbox__input" placeholder="" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--multipletext" role="presentation">
+		<table class="sd-multipletext">
+			<tbody>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-formbox--error sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 1</span>
+								<span>&nbsp;</span>
+								<span aria-hidden="true" class="sd-question__required-text">*</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-formbox--error sd-text">
+									<input aria-invalid="true" aria-label="Text 1" aria-required="true" class="sd-formbox__input" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+				</tr>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell sd-multipletext__cell--error sd-multipletext__cell--error-bottom">
+						<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question" role="alert">
+							<div>
+								<span aria-hidden="true">
+								</span>
+								<span class="sd-error__item">
+									<span class="sv-string-viewer">Response required.</span>
+								</span>
+							</div>
 						</div>
-					</div>
-				</label>
-			</td>
-		</tr>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell sd-multipletext__cell--error sd-multipletext__cell--error-bottom">
-				<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question" role="alert">
-					<div>
-						<span aria-hidden="true">
-						</span>
-						<span class="sd-error__item">
-							<span class="sv-string-viewer">Response required.</span>
-						</span>
-					</div>
-				</div>
-			</td>
-		</tr>
-	</tbody>
-</table>
\ No newline at end of file
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/multipletext-error-top-v2.snap.html b/tests/markup/snapshots/multipletext-error-top-v2.snap.html
index a3f3e2c68b..aff3bc6221 100644
--- a/tests/markup/snapshots/multipletext-error-top-v2.snap.html
+++ b/tests/markup/snapshots/multipletext-error-top-v2.snap.html
@@ -1,33 +1,37 @@
-<table class="sd-multipletext">
-	<tbody>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell sd-multipletext__cell--error sd-multipletext__cell--error-top">
-				<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-element__erbox--above-element sd-error sd-question__erbox sd-question__erbox--above-question" role="alert">
-					<div>
-						<span aria-hidden="true">
-						</span>
-						<span class="sd-error__item">
-							<span class="sv-string-viewer">Response required.</span>
-						</span>
-					</div>
-				</div>
-			</td>
-		</tr>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-formbox--error sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 1</span>
-						<span>&nbsp;</span>
-						<span aria-hidden="true" class="sd-question__required-text">*</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-formbox--error sd-text">
-							<input aria-invalid="true" aria-label="Text 1" aria-required="true" class="sd-formbox__input" placeholder="" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--multipletext" role="presentation">
+		<table class="sd-multipletext">
+			<tbody>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell sd-multipletext__cell--error sd-multipletext__cell--error-top">
+						<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-element__erbox--above-element sd-error sd-question__erbox sd-question__erbox--above-question" role="alert">
+							<div>
+								<span aria-hidden="true">
+								</span>
+								<span class="sd-error__item">
+									<span class="sv-string-viewer">Response required.</span>
+								</span>
+							</div>
 						</div>
-					</div>
-				</label>
-			</td>
-		</tr>
-	</tbody>
-</table>
\ No newline at end of file
+					</td>
+				</tr>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-formbox--error sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 1</span>
+								<span>&nbsp;</span>
+								<span aria-hidden="true" class="sd-question__required-text">*</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-formbox--error sd-text">
+									<input aria-invalid="true" aria-label="Text 1" aria-required="true" class="sd-formbox__input" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/multipletext-readonly.snap.html b/tests/markup/snapshots/multipletext-readonly.snap.html
index 329c14a261..2c5218e97b 100644
--- a/tests/markup/snapshots/multipletext-readonly.snap.html
+++ b/tests/markup/snapshots/multipletext-readonly.snap.html
@@ -1,56 +1,60 @@
-<table class="sd-multipletext">
-	<tbody>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-formbox--readonly sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 1</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-formbox--readonly sd-text">
-							<input aria-invalid="false" aria-label="Text 1" aria-required="false" class="sd-formbox__input" readonly="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-formbox--readonly sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 2</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-formbox--readonly sd-text">
-							<input aria-invalid="false" aria-label="Text 2" aria-required="false" class="sd-formbox__input" readonly="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-		</tr>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-formbox--readonly sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 3</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-formbox--readonly sd-text">
-							<input aria-invalid="false" aria-label="Text 3" aria-required="false" class="sd-formbox__input" readonly="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-formbox--readonly sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 4</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-formbox--readonly sd-text">
-							<input aria-invalid="false" aria-label="Text 4" aria-required="false" class="sd-formbox__input" readonly="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-		</tr>
-	</tbody>
-</table>
\ No newline at end of file
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--multipletext" role="presentation">
+		<table class="sd-multipletext">
+			<tbody>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-formbox--readonly sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 1</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-formbox--readonly sd-text">
+									<input aria-invalid="false" aria-label="Text 1" aria-required="false" class="sd-formbox__input" readonly="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-formbox--readonly sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 2</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-formbox--readonly sd-text">
+									<input aria-invalid="false" aria-label="Text 2" aria-required="false" class="sd-formbox__input" readonly="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+				</tr>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-formbox--readonly sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 3</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-formbox--readonly sd-text">
+									<input aria-invalid="false" aria-label="Text 3" aria-required="false" class="sd-formbox__input" readonly="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-formbox--readonly sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 4</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-formbox--readonly sd-text">
+									<input aria-invalid="false" aria-label="Text 4" aria-required="false" class="sd-formbox__input" readonly="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/multipletext.snap.html b/tests/markup/snapshots/multipletext.snap.html
index 63b29a3892..f3cc581bdf 100644
--- a/tests/markup/snapshots/multipletext.snap.html
+++ b/tests/markup/snapshots/multipletext.snap.html
@@ -1,56 +1,60 @@
-<table class="sd-multipletext">
-	<tbody>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 1</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="Text 1" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 2</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="Text 2" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-		</tr>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 3</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="Text 3" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 4</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="Text 4" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-		</tr>
-	</tbody>
-</table>
\ No newline at end of file
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--multipletext" role="presentation">
+		<table class="sd-multipletext">
+			<tbody>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 1</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="Text 1" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 2</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="Text 2" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+				</tr>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 3</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="Text 3" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 4</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="Text 4" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/page-questionTitleWidth.snap.html b/tests/markup/snapshots/page-questionTitleWidth.snap.html
index dfa3168a00..f46707c51e 100644
--- a/tests/markup/snapshots/page-questionTitleWidth.snap.html
+++ b/tests/markup/snapshots/page-questionTitleWidth.snap.html
@@ -1,15 +1,21 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--left sd-row__question sd-row__question--small" data-name="name" id="testid0">
-		<div class="sd-element__header sd-question__header sd-question__header--location--left" style="width:500px;">
-			<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Employee name:</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--left sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--left sd-row__question sd-row__question--small" data-name="name" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-question__header sd-question__header--location--left" style="width:500px;">
+						<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Employee name:</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--left sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/page-swnl-title-v2.snap.html b/tests/markup/snapshots/page-swnl-title-v2.snap.html
index b1f446c743..359bcc699f 100644
--- a/tests/markup/snapshots/page-swnl-title-v2.snap.html
+++ b/tests/markup/snapshots/page-swnl-title-v2.snap.html
@@ -1,31 +1,41 @@
-<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row sd-row--multiple">
+	<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
-<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid1">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">2.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid1i" placeholder="" type="text">
+	<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid1">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">2.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid1i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/page-swnl-v2.snap.html b/tests/markup/snapshots/page-swnl-v2.snap.html
index 20a6a3ea0c..7f603e30f9 100644
--- a/tests/markup/snapshots/page-swnl-v2.snap.html
+++ b/tests/markup/snapshots/page-swnl-v2.snap.html
@@ -1,14 +1,24 @@
-<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-html">HTML1</div>
+<div class="sd-clearfix sd-page__row sd-row sd-row--multiple">
+	<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-html">HTML1</div>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
-</div>
-<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-html">HTML2</div>
+	<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-html">HTML2</div>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/page-title-v2.snap.html b/tests/markup/snapshots/page-title-v2.snap.html
index 779ad6c4b2..b9bf8662a9 100644
--- a/tests/markup/snapshots/page-title-v2.snap.html
+++ b/tests/markup/snapshots/page-title-v2.snap.html
@@ -1,15 +1,21 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/panel-page-swnl-title-v2.snap.html b/tests/markup/snapshots/panel-page-swnl-title-v2.snap.html
index 9822c1239e..1cfee3df34 100644
--- a/tests/markup/snapshots/panel-page-swnl-title-v2.snap.html
+++ b/tests/markup/snapshots/panel-page-swnl-title-v2.snap.html
@@ -1,33 +1,43 @@
-<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row sd-row--multiple">
+	<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
-<div style="flex:1 1 50%; max-width:100%; min-width:auto;">
-	<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
-		<div aria-label="name" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
-			<div class="sd-clearfix sd-row">
-				<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-					<div class="sd-element sd-element--nested sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid1">
-						<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-							<div class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle">
-								<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-							</div>
-						</div>
-						<div class="sd-question__content sd-question__content--text" role="presentation">
-							<div class="sd-formbox sd-text">
-								<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid1i" placeholder="" type="text">
+	<div style="flex:1 1 50%; max-width:100%; min-width:auto;">
+		<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
+			<div aria-label="name" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
+				<div class="sd-clearfix sd-row">
+					<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+						<div class="sd-element sd-element--nested sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid1">
+							<div class="sd-question__container">
+								<div class="sd-question__header-and-content-container">
+									<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+										<div class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle">
+											<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+										</div>
+									</div>
+									<div class="sd-question__content sd-question__content--text" role="presentation">
+										<div class="sd-formbox sd-text">
+											<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid1i" placeholder="" type="text">
+										</div>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
diff --git a/tests/markup/snapshots/panel-page-swnl-v2.snap.html b/tests/markup/snapshots/panel-page-swnl-v2.snap.html
index 716bc51aa4..c855a1ee07 100644
--- a/tests/markup/snapshots/panel-page-swnl-v2.snap.html
+++ b/tests/markup/snapshots/panel-page-swnl-v2.snap.html
@@ -1,18 +1,28 @@
-<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-html">HTML1</div>
+<div class="sd-clearfix sd-page__row sd-row sd-row--multiple">
+	<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-html">HTML1</div>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
-</div>
-<div style="flex:1 1 50%; max-width:100%; min-width:auto;">
-	<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
-		<div aria-label="name" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
-			<div class="sd-clearfix sd-row">
-				<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-					<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
-						<div class="sd-element__content sd-question__content" role="presentation">
-							<div class="sd-element--nested sd-html sd-html--nested">HTML2</div>
+	<div style="flex:1 1 50%; max-width:100%; min-width:auto;">
+		<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
+			<div aria-label="name" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
+				<div class="sd-clearfix sd-row">
+					<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+						<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
+							<div class="sd-question__container">
+								<div class="sd-question__header-and-content-container">
+									<div class="sd-element__content sd-question__content" role="presentation">
+										<div class="sd-element--nested sd-html sd-html--nested">HTML2</div>
+									</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/panel-question-headers.snap.html b/tests/markup/snapshots/panel-question-headers.snap.html
index f022d0d171..fb0bbf762e 100644
--- a/tests/markup/snapshots/panel-question-headers.snap.html
+++ b/tests/markup/snapshots/panel-question-headers.snap.html
@@ -1,28 +1,34 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
-	<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
-		<div class="sd-element__header sd-element__header--location-top sd-panel__header">
-			<div class="sd-element__title sd-panel__title sd-title" id="testidp0_ariaTitle">
-				<span class="sv-string-viewer sv-string-viewer--multiline">panel_title</span>
-			</div>
-			<div class="sd-description sd-panel__description">
-				<span class="sv-string-viewer sv-string-viewer--multiline">panel_description</span>
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
+		<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
+			<div class="sd-element__header sd-element__header--location-top sd-panel__header">
+				<div class="sd-element__title sd-panel__title sd-title" id="testidp0_ariaTitle">
+					<span class="sv-string-viewer sv-string-viewer--multiline">panel_title</span>
+				</div>
+				<div class="sd-description sd-panel__description">
+					<span class="sv-string-viewer sv-string-viewer--multiline">panel_description</span>
+				</div>
 			</div>
-		</div>
-		<div aria-labelledby="testidp0_ariaTitle" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
-			<div class="sd-clearfix sd-row">
-				<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-					<div class="sd-element sd-element--nested sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid0">
-						<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-							<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-								<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-							</div>
-							<div class="sd-description sd-question__description" id="testid0_ariaDescription">
-								<span class="sv-string-viewer sv-string-viewer--multiline">Question description</span>
-							</div>
-						</div>
-						<div class="sd-question__content sd-question__content--text" role="presentation">
-							<div class="sd-formbox sd-text">
-								<input aria-describedby="testid0_ariaDescription" aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+			<div aria-labelledby="testidp0_ariaTitle" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
+				<div class="sd-clearfix sd-row">
+					<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+						<div class="sd-element sd-element--nested sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid0">
+							<div class="sd-question__container">
+								<div class="sd-question__header-and-content-container">
+									<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+										<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+											<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+										</div>
+										<div class="sd-description sd-question__description" id="testid0_ariaDescription">
+											<span class="sv-string-viewer sv-string-viewer--multiline">Question description</span>
+										</div>
+									</div>
+									<div class="sd-question__content sd-question__content--text" role="presentation">
+										<div class="sd-formbox sd-text">
+											<input aria-describedby="testid0_ariaDescription" aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+										</div>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
diff --git a/tests/markup/snapshots/panel-required-header.snap.html b/tests/markup/snapshots/panel-required-header.snap.html
index c025328a36..1358ca6b6e 100644
--- a/tests/markup/snapshots/panel-required-header.snap.html
+++ b/tests/markup/snapshots/panel-required-header.snap.html
@@ -1,19 +1,25 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
-	<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
-		<div class="sd-element__header sd-element__header--location-top sd-panel__header">
-			<div class="sd-element__title sd-panel__title sd-title" id="testidp0_ariaTitle">
-				<span class="sv-string-viewer sv-string-viewer--multiline">panel_title</span>
-				<span>&nbsp;</span>
-				<span aria-hidden="true" class="sd-panel__required-text">*</span>
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
+		<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
+			<div class="sd-element__header sd-element__header--location-top sd-panel__header">
+				<div class="sd-element__title sd-panel__title sd-title" id="testidp0_ariaTitle">
+					<span class="sv-string-viewer sv-string-viewer--multiline">panel_title</span>
+					<span>&nbsp;</span>
+					<span aria-hidden="true" class="sd-panel__required-text">*</span>
+				</div>
 			</div>
-		</div>
-		<div aria-labelledby="testidp0_ariaTitle" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
-			<div class="sd-clearfix sd-row">
-				<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-					<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question1" id="testid0">
-						<div class="sd-question__content sd-question__content--text" role="presentation">
-							<div class="sd-formbox sd-text">
-								<input aria-invalid="false" aria-label="question1" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+			<div aria-labelledby="testidp0_ariaTitle" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
+				<div class="sd-clearfix sd-row">
+					<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+						<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question1" id="testid0">
+							<div class="sd-question__container">
+								<div class="sd-question__header-and-content-container">
+									<div class="sd-question__content sd-question__content--text" role="presentation">
+										<div class="sd-formbox sd-text">
+											<input aria-invalid="false" aria-label="question1" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+										</div>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
diff --git a/tests/markup/snapshots/panel-swnl-v2.snap.html b/tests/markup/snapshots/panel-swnl-v2.snap.html
index 1bfb9fd22b..16f0d6ff7c 100644
--- a/tests/markup/snapshots/panel-swnl-v2.snap.html
+++ b/tests/markup/snapshots/panel-swnl-v2.snap.html
@@ -1,8 +1,12 @@
 <div class="sd-clearfix sd-row">
 	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 		<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
-			<div class="sd-element__content sd-question__content" role="presentation">
-				<div class="sd-element--nested sd-html sd-html--nested">HTML2</div>
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-element--nested sd-html sd-html--nested">HTML2</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/panel-text.snap.html b/tests/markup/snapshots/panel-text.snap.html
index 2b22a72bdb..740fb75b8a 100644
--- a/tests/markup/snapshots/panel-text.snap.html
+++ b/tests/markup/snapshots/panel-text.snap.html
@@ -1,9 +1,13 @@
 <div class="sd-clearfix sd-row">
 	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 		<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question1" id="testid0">
-			<div class="sd-question__content sd-question__content--text" role="presentation">
-				<div class="sd-formbox sd-text">
-					<input aria-invalid="false" aria-label="question1" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-label="question1" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/panel.snap.html b/tests/markup/snapshots/panel.snap.html
index b116853705..e4c997fbdb 100644
--- a/tests/markup/snapshots/panel.snap.html
+++ b/tests/markup/snapshots/panel.snap.html
@@ -1,8 +1,12 @@
 <div class="sd-clearfix sd-row">
 	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 		<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid0">
-			<div class="sd-element__content sd-question__content" role="presentation">
-				<div class="sd-element--nested sd-html sd-html--nested">HTML content here</div>
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-element--nested sd-html sd-html--nested">HTML content here</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -10,9 +14,13 @@
 <div class="sd-clearfix sd-row">
 	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 		<div class="sd-element sd-element--nested sd-question sd-question--image" data-name="banner" id="testid1">
-			<div class="sd-element__content sd-question__content" role="presentation">
-				<div class="sd-image">
-					<img alt="banner" class="sd-image__image" height="300" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="object-fit:contain;" width="500">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-image">
+							<img alt="banner" class="sd-image__image" height="300" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="object-fit:contain;" width="500">
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/paneldynamic-list-legacy-navigation.snap.html b/tests/markup/snapshots/paneldynamic-list-legacy-navigation.snap.html
index 742e76c2df..7007543560 100644
--- a/tests/markup/snapshots/paneldynamic-list-legacy-navigation.snap.html
+++ b/tests/markup/snapshots/paneldynamic-list-legacy-navigation.snap.html
@@ -1,20 +1,24 @@
-<div class="sd-paneldynamic">
-	<div class="sd-paneldynamic__panels-container">
-		<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
-		</div>
-		<hr class="sd-paneldynamic__separator">
-			<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
-			</div>
-		</div>
-		<div class="sd-paneldynamic__footer">
-			<hr class="sd-paneldynamic__separator">
-				<div class="sd-paneldynamic__buttons-container">
-					<div class="sd-action-bar sd-action-bar--default-size">
-						<div class="sd-action-bar__item">
-							<div class="sd-action-bar__item-content">
-								<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" role="button" tabindex="0" type="button">
-									<span class="sd-action__title">Add new</span>
-								</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-paneldynamic">
+			<div class="sd-paneldynamic__panels-container">
+				<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
+				</div>
+				<hr class="sd-paneldynamic__separator">
+					<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
+					</div>
+				</div>
+				<div class="sd-paneldynamic__footer">
+					<hr class="sd-paneldynamic__separator">
+						<div class="sd-paneldynamic__buttons-container">
+							<div class="sd-action-bar sd-action-bar--default-size">
+								<div class="sd-action-bar__item">
+									<div class="sd-action-bar__item-content">
+										<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" role="button" tabindex="0" type="button">
+											<span class="sd-action__title">Add new</span>
+										</button>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
diff --git a/tests/markup/snapshots/paneldynamic-list.snap.html b/tests/markup/snapshots/paneldynamic-list.snap.html
index 742e76c2df..7007543560 100644
--- a/tests/markup/snapshots/paneldynamic-list.snap.html
+++ b/tests/markup/snapshots/paneldynamic-list.snap.html
@@ -1,20 +1,24 @@
-<div class="sd-paneldynamic">
-	<div class="sd-paneldynamic__panels-container">
-		<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
-		</div>
-		<hr class="sd-paneldynamic__separator">
-			<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
-			</div>
-		</div>
-		<div class="sd-paneldynamic__footer">
-			<hr class="sd-paneldynamic__separator">
-				<div class="sd-paneldynamic__buttons-container">
-					<div class="sd-action-bar sd-action-bar--default-size">
-						<div class="sd-action-bar__item">
-							<div class="sd-action-bar__item-content">
-								<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" role="button" tabindex="0" type="button">
-									<span class="sd-action__title">Add new</span>
-								</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-paneldynamic">
+			<div class="sd-paneldynamic__panels-container">
+				<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
+				</div>
+				<hr class="sd-paneldynamic__separator">
+					<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
+					</div>
+				</div>
+				<div class="sd-paneldynamic__footer">
+					<hr class="sd-paneldynamic__separator">
+						<div class="sd-paneldynamic__buttons-container">
+							<div class="sd-action-bar sd-action-bar--default-size">
+								<div class="sd-action-bar__item">
+									<div class="sd-action-bar__item-content">
+										<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" role="button" tabindex="0" type="button">
+											<span class="sd-action__title">Add new</span>
+										</button>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
diff --git a/tests/markup/snapshots/paneldynamic-no-footer-1.snap.html b/tests/markup/snapshots/paneldynamic-no-footer-1.snap.html
index e4050d19ac..7f5cfbdf3d 100644
--- a/tests/markup/snapshots/paneldynamic-no-footer-1.snap.html
+++ b/tests/markup/snapshots/paneldynamic-no-footer-1.snap.html
@@ -1,51 +1,61 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
-	<div aria-label="question1" class="sd-element sd-element--complex sd-element--with-frame sd-question sd-question--complex sd-question--paneldynamic sd-row__question" data-name="question1" role="group">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-paneldynamic">
-				<div class="sd-paneldynamic__panels-container">
-					<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
-						<div class="sd-element sd-element--complex sd-panel sd-row__panel">
-							<div class="sd-element__content sd-panel__content" role="group">
-								<div class="sd-clearfix sd-row">
-									<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-										<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question2">
-											<div class="sd-question__content sd-question__content--text" role="presentation">
-												<div class="sd-formbox sd-text">
-													<input aria-invalid="false" aria-label="question2" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
+		<div aria-label="question1" class="sd-element sd-element--complex sd-element--with-frame sd-question sd-question--complex sd-question--paneldynamic sd-row__question" data-name="question1" role="group">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-paneldynamic">
+							<div class="sd-paneldynamic__panels-container">
+								<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
+									<div class="sd-element sd-element--complex sd-panel sd-row__panel">
+										<div class="sd-element__content sd-panel__content" role="group">
+											<div class="sd-clearfix sd-row">
+												<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+													<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question2">
+														<div class="sd-question__container">
+															<div class="sd-question__header-and-content-container">
+																<div class="sd-question__content sd-question__content--text" role="presentation">
+																	<div class="sd-formbox sd-text">
+																		<input aria-invalid="false" aria-label="question2" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
+																	</div>
+																</div>
+															</div>
+														</div>
+													</div>
 												</div>
 											</div>
 										</div>
-									</div>
-								</div>
-								<div class="sd-action-bar sd-action-bar--default-size sd-paneldynamic__panel-footer" style="opacity:0; overflow:hidden;">
-									<div class="sd-action-bar__item">
-										<div class="sd-action-bar__item-content">
-											<button class="sd-action sd-action--alert sd-action--secondary sd-action--small sd-paneldynamic__btn sd-paneldynamic__remove-btn" role="button" tabindex="0" type="button">
-												<span class="sd-action__title">Remove</span>
-											</button>
-										</div>
-									</div>
-									<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
-										<div class="sd-action-bar__item-content">
-											<button class="sd-action sd-action--neutral sd-action--secondary sd-action--small sv-dots__item" role="button" tabindex="0" title="More" type="button">
-												<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
-													<use xlink:href="#icon-more-24x24" class="">
-													</use>
-													<title class="">More</title>
-												</svg>
-											</button>
-											<div>
-												<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-													<div class="sv-popup__container">
-														<div class="sv-popup__body-content">
-															<div class="sv-popup__scrolling-content">
-																<div class="sv-popup__content">
-																	<div class="sd-menu-list__container">
-																		<div class="sd-menu-list__empty-container">
-																			<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+										<div class="sd-action-bar sd-action-bar--default-size sd-paneldynamic__panel-footer" style="opacity:0; overflow:hidden;">
+											<div class="sd-action-bar__item">
+												<div class="sd-action-bar__item-content">
+													<button class="sd-action sd-action--alert sd-action--secondary sd-action--small sd-paneldynamic__btn sd-paneldynamic__remove-btn" role="button" tabindex="0" type="button">
+														<span class="sd-action__title">Remove</span>
+													</button>
+												</div>
+											</div>
+											<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
+												<div class="sd-action-bar__item-content">
+													<button class="sd-action sd-action--neutral sd-action--secondary sd-action--small sv-dots__item" role="button" tabindex="0" title="More" type="button">
+														<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
+															<use xlink:href="#icon-more-24x24" class="">
+															</use>
+															<title class="">More</title>
+														</svg>
+													</button>
+													<div>
+														<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+															<div class="sv-popup__container">
+																<div class="sv-popup__body-content">
+																	<div class="sv-popup__scrolling-content">
+																		<div class="sv-popup__content">
+																			<div class="sd-menu-list__container">
+																				<div class="sd-menu-list__empty-container">
+																					<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+																				</div>
+																				<ul class="sd-menu-list" role="menu" style="display:none;">
+																				</ul>
+																			</div>
 																		</div>
-																		<ul class="sd-menu-list" role="menu" style="display:none;">
-																		</ul>
 																	</div>
 																</div>
 															</div>
@@ -60,10 +70,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="sd-paneldynamic__footer">
-					<hr class="sd-paneldynamic__separator">
-					</div>
-				</div>
 			</div>
 		</div>
-	</div>
\ No newline at end of file
+	</div>
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/paneldynamic-no-footer-2.snap.html b/tests/markup/snapshots/paneldynamic-no-footer-2.snap.html
index e4050d19ac..7f5cfbdf3d 100644
--- a/tests/markup/snapshots/paneldynamic-no-footer-2.snap.html
+++ b/tests/markup/snapshots/paneldynamic-no-footer-2.snap.html
@@ -1,51 +1,61 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
-	<div aria-label="question1" class="sd-element sd-element--complex sd-element--with-frame sd-question sd-question--complex sd-question--paneldynamic sd-row__question" data-name="question1" role="group">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-paneldynamic">
-				<div class="sd-paneldynamic__panels-container">
-					<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
-						<div class="sd-element sd-element--complex sd-panel sd-row__panel">
-							<div class="sd-element__content sd-panel__content" role="group">
-								<div class="sd-clearfix sd-row">
-									<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-										<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question2">
-											<div class="sd-question__content sd-question__content--text" role="presentation">
-												<div class="sd-formbox sd-text">
-													<input aria-invalid="false" aria-label="question2" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
+		<div aria-label="question1" class="sd-element sd-element--complex sd-element--with-frame sd-question sd-question--complex sd-question--paneldynamic sd-row__question" data-name="question1" role="group">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-paneldynamic">
+							<div class="sd-paneldynamic__panels-container">
+								<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
+									<div class="sd-element sd-element--complex sd-panel sd-row__panel">
+										<div class="sd-element__content sd-panel__content" role="group">
+											<div class="sd-clearfix sd-row">
+												<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+													<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question2">
+														<div class="sd-question__container">
+															<div class="sd-question__header-and-content-container">
+																<div class="sd-question__content sd-question__content--text" role="presentation">
+																	<div class="sd-formbox sd-text">
+																		<input aria-invalid="false" aria-label="question2" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
+																	</div>
+																</div>
+															</div>
+														</div>
+													</div>
 												</div>
 											</div>
 										</div>
-									</div>
-								</div>
-								<div class="sd-action-bar sd-action-bar--default-size sd-paneldynamic__panel-footer" style="opacity:0; overflow:hidden;">
-									<div class="sd-action-bar__item">
-										<div class="sd-action-bar__item-content">
-											<button class="sd-action sd-action--alert sd-action--secondary sd-action--small sd-paneldynamic__btn sd-paneldynamic__remove-btn" role="button" tabindex="0" type="button">
-												<span class="sd-action__title">Remove</span>
-											</button>
-										</div>
-									</div>
-									<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
-										<div class="sd-action-bar__item-content">
-											<button class="sd-action sd-action--neutral sd-action--secondary sd-action--small sv-dots__item" role="button" tabindex="0" title="More" type="button">
-												<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
-													<use xlink:href="#icon-more-24x24" class="">
-													</use>
-													<title class="">More</title>
-												</svg>
-											</button>
-											<div>
-												<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-													<div class="sv-popup__container">
-														<div class="sv-popup__body-content">
-															<div class="sv-popup__scrolling-content">
-																<div class="sv-popup__content">
-																	<div class="sd-menu-list__container">
-																		<div class="sd-menu-list__empty-container">
-																			<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+										<div class="sd-action-bar sd-action-bar--default-size sd-paneldynamic__panel-footer" style="opacity:0; overflow:hidden;">
+											<div class="sd-action-bar__item">
+												<div class="sd-action-bar__item-content">
+													<button class="sd-action sd-action--alert sd-action--secondary sd-action--small sd-paneldynamic__btn sd-paneldynamic__remove-btn" role="button" tabindex="0" type="button">
+														<span class="sd-action__title">Remove</span>
+													</button>
+												</div>
+											</div>
+											<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
+												<div class="sd-action-bar__item-content">
+													<button class="sd-action sd-action--neutral sd-action--secondary sd-action--small sv-dots__item" role="button" tabindex="0" title="More" type="button">
+														<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
+															<use xlink:href="#icon-more-24x24" class="">
+															</use>
+															<title class="">More</title>
+														</svg>
+													</button>
+													<div>
+														<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+															<div class="sv-popup__container">
+																<div class="sv-popup__body-content">
+																	<div class="sv-popup__scrolling-content">
+																		<div class="sv-popup__content">
+																			<div class="sd-menu-list__container">
+																				<div class="sd-menu-list__empty-container">
+																					<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+																				</div>
+																				<ul class="sd-menu-list" role="menu" style="display:none;">
+																				</ul>
+																			</div>
 																		</div>
-																		<ul class="sd-menu-list" role="menu" style="display:none;">
-																		</ul>
 																	</div>
 																</div>
 															</div>
@@ -60,10 +70,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="sd-paneldynamic__footer">
-					<hr class="sd-paneldynamic__separator">
-					</div>
-				</div>
 			</div>
 		</div>
-	</div>
\ No newline at end of file
+	</div>
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/paneldynamic-progress-bottom-legacy-navigation.snap.html b/tests/markup/snapshots/paneldynamic-progress-bottom-legacy-navigation.snap.html
index 44c366ccd4..f98b3bb284 100644
--- a/tests/markup/snapshots/paneldynamic-progress-bottom-legacy-navigation.snap.html
+++ b/tests/markup/snapshots/paneldynamic-progress-bottom-legacy-navigation.snap.html
@@ -1,26 +1,30 @@
-<div class="sd-paneldynamic">
-	<div class="sd-paneldynamic__panels-container">
-		<div class="sd-paneldynamic__panel-wrapper">
-		</div>
-	</div>
-	<div class="sd-paneldynamic__footer">
-		<hr class="sd-paneldynamic__separator">
-			<div class="sd-progress">
-				<div aria-label="Progress bar" class="sd-progress__bar" role="progressbar" style="width:50%;">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-paneldynamic">
+			<div class="sd-paneldynamic__panels-container">
+				<div class="sd-paneldynamic__panel-wrapper">
 				</div>
 			</div>
-			<div class="sd-paneldynamic__buttons-container">
-				<div class="sd-action-bar sd-action-bar--default-size">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-								<span class="sd-action__title">Next</span>
-							</button>
+			<div class="sd-paneldynamic__footer">
+				<hr class="sd-paneldynamic__separator">
+					<div class="sd-progress">
+						<div aria-label="Progress bar" class="sd-progress__bar" role="progressbar" style="width:50%;">
 						</div>
 					</div>
-					<div class="sd-action-bar__item sd-action-bar__item--space">
-						<div class="sd-action-bar__item-content">
-							<div class="sd-paneldynamic__progress-text">1 of 2</div>
+					<div class="sd-paneldynamic__buttons-container">
+						<div class="sd-action-bar sd-action-bar--default-size">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+										<span class="sd-action__title">Next</span>
+									</button>
+								</div>
+							</div>
+							<div class="sd-action-bar__item sd-action-bar__item--space">
+								<div class="sd-action-bar__item-content">
+									<div class="sd-paneldynamic__progress-text">1 of 2</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/paneldynamic-progress-bottom.snap.html b/tests/markup/snapshots/paneldynamic-progress-bottom.snap.html
index 44c366ccd4..f98b3bb284 100644
--- a/tests/markup/snapshots/paneldynamic-progress-bottom.snap.html
+++ b/tests/markup/snapshots/paneldynamic-progress-bottom.snap.html
@@ -1,26 +1,30 @@
-<div class="sd-paneldynamic">
-	<div class="sd-paneldynamic__panels-container">
-		<div class="sd-paneldynamic__panel-wrapper">
-		</div>
-	</div>
-	<div class="sd-paneldynamic__footer">
-		<hr class="sd-paneldynamic__separator">
-			<div class="sd-progress">
-				<div aria-label="Progress bar" class="sd-progress__bar" role="progressbar" style="width:50%;">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-paneldynamic">
+			<div class="sd-paneldynamic__panels-container">
+				<div class="sd-paneldynamic__panel-wrapper">
 				</div>
 			</div>
-			<div class="sd-paneldynamic__buttons-container">
-				<div class="sd-action-bar sd-action-bar--default-size">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-								<span class="sd-action__title">Next</span>
-							</button>
+			<div class="sd-paneldynamic__footer">
+				<hr class="sd-paneldynamic__separator">
+					<div class="sd-progress">
+						<div aria-label="Progress bar" class="sd-progress__bar" role="progressbar" style="width:50%;">
 						</div>
 					</div>
-					<div class="sd-action-bar__item sd-action-bar__item--space">
-						<div class="sd-action-bar__item-content">
-							<div class="sd-paneldynamic__progress-text">1 of 2</div>
+					<div class="sd-paneldynamic__buttons-container">
+						<div class="sd-action-bar sd-action-bar--default-size">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+										<span class="sd-action__title">Next</span>
+									</button>
+								</div>
+							</div>
+							<div class="sd-action-bar__item sd-action-bar__item--space">
+								<div class="sd-action-bar__item-content">
+									<div class="sd-paneldynamic__progress-text">1 of 2</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/paneldynamic-progress-tab-center.snap.html b/tests/markup/snapshots/paneldynamic-progress-tab-center.snap.html
index eb25e56118..868179f0c6 100644
--- a/tests/markup/snapshots/paneldynamic-progress-tab-center.snap.html
+++ b/tests/markup/snapshots/paneldynamic-progress-tab-center.snap.html
@@ -1,41 +1,45 @@
-<div class="sd-paneldynamic">
-	<div class="sd-paneldynamic__tabs-container">
-		<div class="sd-action-bar sd-action-bar--default-size sd-tabs-toolbar sd-tabs-toolbar--center" style="opacity:0; overflow:hidden;">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action--brand sd-action--secondary sd-action--small sd-tab-item sd-tab-item--active" role="button" tabindex="0" type="button">
-						<span class="sd-tab-item__title">Panel 1</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item" role="button" tabindex="0" type="button">
-						<span class="sd-tab-item__title">Panel 2</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item sd-tab-item--icon sv-dots__item" role="button" tabindex="0" title="More" type="button">
-						<svg class="sd-tab-item__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
-							<use xlink:href="#icon-more-24x24" class="">
-							</use>
-							<title class="">More</title>
-						</svg>
-					</button>
-					<div>
-						<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-							<div class="sv-popup__container">
-								<div class="sv-popup__body-content">
-									<div class="sv-popup__scrolling-content">
-										<div class="sv-popup__content">
-											<div class="sd-menu-list__container">
-												<div class="sd-menu-list__empty-container">
-													<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-paneldynamic">
+			<div class="sd-paneldynamic__tabs-container">
+				<div class="sd-action-bar sd-action-bar--default-size sd-tabs-toolbar sd-tabs-toolbar--center" style="opacity:0; overflow:hidden;">
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action--brand sd-action--secondary sd-action--small sd-tab-item sd-tab-item--active" role="button" tabindex="0" type="button">
+								<span class="sd-tab-item__title">Panel 1</span>
+							</button>
+						</div>
+					</div>
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item" role="button" tabindex="0" type="button">
+								<span class="sd-tab-item__title">Panel 2</span>
+							</button>
+						</div>
+					</div>
+					<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item sd-tab-item--icon sv-dots__item" role="button" tabindex="0" title="More" type="button">
+								<svg class="sd-tab-item__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
+									<use xlink:href="#icon-more-24x24" class="">
+									</use>
+									<title class="">More</title>
+								</svg>
+							</button>
+							<div>
+								<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+									<div class="sv-popup__container">
+										<div class="sv-popup__body-content">
+											<div class="sv-popup__scrolling-content">
+												<div class="sv-popup__content">
+													<div class="sd-menu-list__container">
+														<div class="sd-menu-list__empty-container">
+															<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+														</div>
+														<ul class="sd-menu-list" role="menu" style="display:none;">
+														</ul>
+													</div>
 												</div>
-												<ul class="sd-menu-list" role="menu" style="display:none;">
-												</ul>
 											</div>
 										</div>
 									</div>
@@ -45,26 +49,26 @@
 					</div>
 				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sd-paneldynamic__panels-container">
-		<div class="sd-paneldynamic__panel-wrapper">
-		</div>
-	</div>
-	<div class="sd-paneldynamic__footer">
-		<hr class="sd-paneldynamic__separator">
-			<div class="sd-paneldynamic__buttons-container">
-				<div class="sd-action-bar sd-action-bar--default-size">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-								<span class="sd-action__title">Next</span>
-							</button>
-						</div>
-					</div>
-					<div class="sd-action-bar__item sd-action-bar__item--space">
-						<div class="sd-action-bar__item-content">
-							<div class="sd-paneldynamic__progress-text">1 of 2</div>
+			<div class="sd-paneldynamic__panels-container">
+				<div class="sd-paneldynamic__panel-wrapper">
+				</div>
+			</div>
+			<div class="sd-paneldynamic__footer">
+				<hr class="sd-paneldynamic__separator">
+					<div class="sd-paneldynamic__buttons-container">
+						<div class="sd-action-bar sd-action-bar--default-size">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+										<span class="sd-action__title">Next</span>
+									</button>
+								</div>
+							</div>
+							<div class="sd-action-bar__item sd-action-bar__item--space">
+								<div class="sd-action-bar__item-content">
+									<div class="sd-paneldynamic__progress-text">1 of 2</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/paneldynamic-progress-tab-left.snap.html b/tests/markup/snapshots/paneldynamic-progress-tab-left.snap.html
index 084b5417e3..69b5891e9c 100644
--- a/tests/markup/snapshots/paneldynamic-progress-tab-left.snap.html
+++ b/tests/markup/snapshots/paneldynamic-progress-tab-left.snap.html
@@ -1,41 +1,45 @@
-<div class="sd-paneldynamic">
-	<div class="sd-paneldynamic__tabs-container">
-		<div class="sd-action-bar sd-action-bar--default-size sd-tabs-toolbar sd-tabs-toolbar--left" style="opacity:0; overflow:hidden;">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action--brand sd-action--secondary sd-action--small sd-tab-item sd-tab-item--active" role="button" tabindex="0" type="button">
-						<span class="sd-tab-item__title">Panel 1</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item" role="button" tabindex="0" type="button">
-						<span class="sd-tab-item__title">Panel 2</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item sd-tab-item--icon sv-dots__item" role="button" tabindex="0" title="More" type="button">
-						<svg class="sd-tab-item__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
-							<use xlink:href="#icon-more-24x24" class="">
-							</use>
-							<title class="">More</title>
-						</svg>
-					</button>
-					<div>
-						<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-							<div class="sv-popup__container">
-								<div class="sv-popup__body-content">
-									<div class="sv-popup__scrolling-content">
-										<div class="sv-popup__content">
-											<div class="sd-menu-list__container">
-												<div class="sd-menu-list__empty-container">
-													<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-paneldynamic">
+			<div class="sd-paneldynamic__tabs-container">
+				<div class="sd-action-bar sd-action-bar--default-size sd-tabs-toolbar sd-tabs-toolbar--left" style="opacity:0; overflow:hidden;">
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action--brand sd-action--secondary sd-action--small sd-tab-item sd-tab-item--active" role="button" tabindex="0" type="button">
+								<span class="sd-tab-item__title">Panel 1</span>
+							</button>
+						</div>
+					</div>
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item" role="button" tabindex="0" type="button">
+								<span class="sd-tab-item__title">Panel 2</span>
+							</button>
+						</div>
+					</div>
+					<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item sd-tab-item--icon sv-dots__item" role="button" tabindex="0" title="More" type="button">
+								<svg class="sd-tab-item__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
+									<use xlink:href="#icon-more-24x24" class="">
+									</use>
+									<title class="">More</title>
+								</svg>
+							</button>
+							<div>
+								<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+									<div class="sv-popup__container">
+										<div class="sv-popup__body-content">
+											<div class="sv-popup__scrolling-content">
+												<div class="sv-popup__content">
+													<div class="sd-menu-list__container">
+														<div class="sd-menu-list__empty-container">
+															<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+														</div>
+														<ul class="sd-menu-list" role="menu" style="display:none;">
+														</ul>
+													</div>
 												</div>
-												<ul class="sd-menu-list" role="menu" style="display:none;">
-												</ul>
 											</div>
 										</div>
 									</div>
@@ -45,26 +49,26 @@
 					</div>
 				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sd-paneldynamic__panels-container">
-		<div class="sd-paneldynamic__panel-wrapper">
-		</div>
-	</div>
-	<div class="sd-paneldynamic__footer">
-		<hr class="sd-paneldynamic__separator">
-			<div class="sd-paneldynamic__buttons-container">
-				<div class="sd-action-bar sd-action-bar--default-size">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-								<span class="sd-action__title">Next</span>
-							</button>
-						</div>
-					</div>
-					<div class="sd-action-bar__item sd-action-bar__item--space">
-						<div class="sd-action-bar__item-content">
-							<div class="sd-paneldynamic__progress-text">1 of 2</div>
+			<div class="sd-paneldynamic__panels-container">
+				<div class="sd-paneldynamic__panel-wrapper">
+				</div>
+			</div>
+			<div class="sd-paneldynamic__footer">
+				<hr class="sd-paneldynamic__separator">
+					<div class="sd-paneldynamic__buttons-container">
+						<div class="sd-action-bar sd-action-bar--default-size">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+										<span class="sd-action__title">Next</span>
+									</button>
+								</div>
+							</div>
+							<div class="sd-action-bar__item sd-action-bar__item--space">
+								<div class="sd-action-bar__item-content">
+									<div class="sd-paneldynamic__progress-text">1 of 2</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/paneldynamic-progress-tab-right.snap.html b/tests/markup/snapshots/paneldynamic-progress-tab-right.snap.html
index 9ed56cab19..eb24bb6aa2 100644
--- a/tests/markup/snapshots/paneldynamic-progress-tab-right.snap.html
+++ b/tests/markup/snapshots/paneldynamic-progress-tab-right.snap.html
@@ -1,41 +1,45 @@
-<div class="sd-paneldynamic">
-	<div class="sd-paneldynamic__tabs-container">
-		<div class="sd-action-bar sd-action-bar--default-size sd-tabs-toolbar sd-tabs-toolbar--right" style="opacity:0; overflow:hidden;">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action--brand sd-action--secondary sd-action--small sd-tab-item sd-tab-item--active" role="button" tabindex="0" type="button">
-						<span class="sd-tab-item__title">Panel 1</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item" role="button" tabindex="0" type="button">
-						<span class="sd-tab-item__title">Panel 2</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item sd-tab-item--icon sv-dots__item" role="button" tabindex="0" title="More" type="button">
-						<svg class="sd-tab-item__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
-							<use xlink:href="#icon-more-24x24" class="">
-							</use>
-							<title class="">More</title>
-						</svg>
-					</button>
-					<div>
-						<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-							<div class="sv-popup__container">
-								<div class="sv-popup__body-content">
-									<div class="sv-popup__scrolling-content">
-										<div class="sv-popup__content">
-											<div class="sd-menu-list__container">
-												<div class="sd-menu-list__empty-container">
-													<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-paneldynamic">
+			<div class="sd-paneldynamic__tabs-container">
+				<div class="sd-action-bar sd-action-bar--default-size sd-tabs-toolbar sd-tabs-toolbar--right" style="opacity:0; overflow:hidden;">
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action--brand sd-action--secondary sd-action--small sd-tab-item sd-tab-item--active" role="button" tabindex="0" type="button">
+								<span class="sd-tab-item__title">Panel 1</span>
+							</button>
+						</div>
+					</div>
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item" role="button" tabindex="0" type="button">
+								<span class="sd-tab-item__title">Panel 2</span>
+							</button>
+						</div>
+					</div>
+					<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item sd-tab-item--icon sv-dots__item" role="button" tabindex="0" title="More" type="button">
+								<svg class="sd-tab-item__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
+									<use xlink:href="#icon-more-24x24" class="">
+									</use>
+									<title class="">More</title>
+								</svg>
+							</button>
+							<div>
+								<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+									<div class="sv-popup__container">
+										<div class="sv-popup__body-content">
+											<div class="sv-popup__scrolling-content">
+												<div class="sv-popup__content">
+													<div class="sd-menu-list__container">
+														<div class="sd-menu-list__empty-container">
+															<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+														</div>
+														<ul class="sd-menu-list" role="menu" style="display:none;">
+														</ul>
+													</div>
 												</div>
-												<ul class="sd-menu-list" role="menu" style="display:none;">
-												</ul>
 											</div>
 										</div>
 									</div>
@@ -45,26 +49,26 @@
 					</div>
 				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sd-paneldynamic__panels-container">
-		<div class="sd-paneldynamic__panel-wrapper">
-		</div>
-	</div>
-	<div class="sd-paneldynamic__footer">
-		<hr class="sd-paneldynamic__separator">
-			<div class="sd-paneldynamic__buttons-container">
-				<div class="sd-action-bar sd-action-bar--default-size">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-								<span class="sd-action__title">Next</span>
-							</button>
-						</div>
-					</div>
-					<div class="sd-action-bar__item sd-action-bar__item--space">
-						<div class="sd-action-bar__item-content">
-							<div class="sd-paneldynamic__progress-text">1 of 2</div>
+			<div class="sd-paneldynamic__panels-container">
+				<div class="sd-paneldynamic__panel-wrapper">
+				</div>
+			</div>
+			<div class="sd-paneldynamic__footer">
+				<hr class="sd-paneldynamic__separator">
+					<div class="sd-paneldynamic__buttons-container">
+						<div class="sd-action-bar sd-action-bar--default-size">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+										<span class="sd-action__title">Next</span>
+									</button>
+								</div>
+							</div>
+							<div class="sd-action-bar__item sd-action-bar__item--space">
+								<div class="sd-action-bar__item-content">
+									<div class="sd-paneldynamic__progress-text">1 of 2</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/paneldynamic-progress-top-legacy-navigation.snap.html b/tests/markup/snapshots/paneldynamic-progress-top-legacy-navigation.snap.html
index 3d34d499a3..fbcafb98a0 100644
--- a/tests/markup/snapshots/paneldynamic-progress-top-legacy-navigation.snap.html
+++ b/tests/markup/snapshots/paneldynamic-progress-top-legacy-navigation.snap.html
@@ -1,26 +1,30 @@
-<div class="sd-paneldynamic">
-	<div class="sd-progress">
-		<div aria-label="Progress bar" class="sd-progress__bar" role="progressbar" style="width:50%;">
-		</div>
-	</div>
-	<div class="sd-paneldynamic__panels-container">
-		<div class="sd-paneldynamic__panel-wrapper">
-		</div>
-	</div>
-	<div class="sd-paneldynamic__footer">
-		<hr class="sd-paneldynamic__separator">
-			<div class="sd-paneldynamic__buttons-container">
-				<div class="sd-action-bar sd-action-bar--default-size">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-								<span class="sd-action__title">Next</span>
-							</button>
-						</div>
-					</div>
-					<div class="sd-action-bar__item sd-action-bar__item--space">
-						<div class="sd-action-bar__item-content">
-							<div class="sd-paneldynamic__progress-text">1 of 2</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-paneldynamic">
+			<div class="sd-progress">
+				<div aria-label="Progress bar" class="sd-progress__bar" role="progressbar" style="width:50%;">
+				</div>
+			</div>
+			<div class="sd-paneldynamic__panels-container">
+				<div class="sd-paneldynamic__panel-wrapper">
+				</div>
+			</div>
+			<div class="sd-paneldynamic__footer">
+				<hr class="sd-paneldynamic__separator">
+					<div class="sd-paneldynamic__buttons-container">
+						<div class="sd-action-bar sd-action-bar--default-size">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+										<span class="sd-action__title">Next</span>
+									</button>
+								</div>
+							</div>
+							<div class="sd-action-bar__item sd-action-bar__item--space">
+								<div class="sd-action-bar__item-content">
+									<div class="sd-paneldynamic__progress-text">1 of 2</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/paneldynamic-progress-top.snap.html b/tests/markup/snapshots/paneldynamic-progress-top.snap.html
index 3d34d499a3..fbcafb98a0 100644
--- a/tests/markup/snapshots/paneldynamic-progress-top.snap.html
+++ b/tests/markup/snapshots/paneldynamic-progress-top.snap.html
@@ -1,26 +1,30 @@
-<div class="sd-paneldynamic">
-	<div class="sd-progress">
-		<div aria-label="Progress bar" class="sd-progress__bar" role="progressbar" style="width:50%;">
-		</div>
-	</div>
-	<div class="sd-paneldynamic__panels-container">
-		<div class="sd-paneldynamic__panel-wrapper">
-		</div>
-	</div>
-	<div class="sd-paneldynamic__footer">
-		<hr class="sd-paneldynamic__separator">
-			<div class="sd-paneldynamic__buttons-container">
-				<div class="sd-action-bar sd-action-bar--default-size">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-								<span class="sd-action__title">Next</span>
-							</button>
-						</div>
-					</div>
-					<div class="sd-action-bar__item sd-action-bar__item--space">
-						<div class="sd-action-bar__item-content">
-							<div class="sd-paneldynamic__progress-text">1 of 2</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-paneldynamic">
+			<div class="sd-progress">
+				<div aria-label="Progress bar" class="sd-progress__bar" role="progressbar" style="width:50%;">
+				</div>
+			</div>
+			<div class="sd-paneldynamic__panels-container">
+				<div class="sd-paneldynamic__panel-wrapper">
+				</div>
+			</div>
+			<div class="sd-paneldynamic__footer">
+				<hr class="sd-paneldynamic__separator">
+					<div class="sd-paneldynamic__buttons-container">
+						<div class="sd-action-bar sd-action-bar--default-size">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+										<span class="sd-action__title">Next</span>
+									</button>
+								</div>
+							</div>
+							<div class="sd-action-bar__item sd-action-bar__item--space">
+								<div class="sd-action-bar__item-content">
+									<div class="sd-paneldynamic__progress-text">1 of 2</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/paneldynamic-remove-btn-action-bar.snap.html b/tests/markup/snapshots/paneldynamic-remove-btn-action-bar.snap.html
index 4c941df791..0b2d5dc969 100644
--- a/tests/markup/snapshots/paneldynamic-remove-btn-action-bar.snap.html
+++ b/tests/markup/snapshots/paneldynamic-remove-btn-action-bar.snap.html
@@ -1,44 +1,54 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
-	<div aria-label="pd" class="sd-element sd-element--complex sd-element--with-frame sd-question sd-question--complex sd-question--paneldynamic sd-row__question" data-name="pd" id="testid0" role="group">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-paneldynamic">
-				<div class="sd-paneldynamic__panels-container">
-					<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
-						<div class="sd-element sd-element--complex sd-panel sd-row__panel" id="testid0panel0">
-							<div class="sd-element__content sd-panel__content" id="testid0panel0_content" role="group">
-								<div class="sd-clearfix sd-row">
-									<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-										<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="q1" id="testid0panel0question0">
-											<div class="sd-question__content sd-question__content--text" role="presentation">
-												<div class="sd-formbox sd-text">
-													<input aria-invalid="false" aria-label="q1" aria-required="false" class="sd-formbox__input" id="testid0panel0question0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
+		<div aria-label="pd" class="sd-element sd-element--complex sd-element--with-frame sd-question sd-question--complex sd-question--paneldynamic sd-row__question" data-name="pd" id="testid0" role="group">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-paneldynamic">
+							<div class="sd-paneldynamic__panels-container">
+								<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
+									<div class="sd-element sd-element--complex sd-panel sd-row__panel" id="testid0panel0">
+										<div class="sd-element__content sd-panel__content" id="testid0panel0_content" role="group">
+											<div class="sd-clearfix sd-row">
+												<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+													<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="q1" id="testid0panel0question0">
+														<div class="sd-question__container">
+															<div class="sd-question__header-and-content-container">
+																<div class="sd-question__content sd-question__content--text" role="presentation">
+																	<div class="sd-formbox sd-text">
+																		<input aria-invalid="false" aria-label="q1" aria-required="false" class="sd-formbox__input" id="testid0panel0question0i" placeholder="" type="text">
+																	</div>
+																</div>
+															</div>
+														</div>
+													</div>
 												</div>
 											</div>
 										</div>
-									</div>
-								</div>
-								<div class="sd-action-bar sd-action-bar--default-size sd-paneldynamic__panel-footer">
-									<div class="sd-action-bar__item">
-										<div class="sd-action-bar__item-content">
-											<button class="sd-action sd-action--alert sd-action--secondary sd-action--small sd-paneldynamic__btn sd-paneldynamic__remove-btn" role="button" tabindex="0" type="button">
-												<span class="sd-action__title">Remove</span>
-											</button>
+										<div class="sd-action-bar sd-action-bar--default-size sd-paneldynamic__panel-footer">
+											<div class="sd-action-bar__item">
+												<div class="sd-action-bar__item-content">
+													<button class="sd-action sd-action--alert sd-action--secondary sd-action--small sd-paneldynamic__btn sd-paneldynamic__remove-btn" role="button" tabindex="0" type="button">
+														<span class="sd-action__title">Remove</span>
+													</button>
+												</div>
+											</div>
 										</div>
 									</div>
 								</div>
 							</div>
-						</div>
-					</div>
-				</div>
-				<div class="sd-paneldynamic__footer">
-					<hr class="sd-paneldynamic__separator">
-						<div class="sd-paneldynamic__buttons-container">
-							<div class="sd-action-bar sd-action-bar--default-size">
-								<div class="sd-action-bar__item">
-									<div class="sd-action-bar__item-content">
-										<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" role="button" tabindex="0" type="button">
-											<span class="sd-action__title">Add new</span>
-										</button>
+							<div class="sd-paneldynamic__footer">
+								<hr class="sd-paneldynamic__separator">
+									<div class="sd-paneldynamic__buttons-container">
+										<div class="sd-action-bar sd-action-bar--default-size">
+											<div class="sd-action-bar__item">
+												<div class="sd-action-bar__item-content">
+													<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" role="button" tabindex="0" type="button">
+														<span class="sd-action__title">Add new</span>
+													</button>
+												</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/paneldynamic-remove-btn-right.snap.html b/tests/markup/snapshots/paneldynamic-remove-btn-right.snap.html
index 47de02c920..cd9cfefb70 100644
--- a/tests/markup/snapshots/paneldynamic-remove-btn-right.snap.html
+++ b/tests/markup/snapshots/paneldynamic-remove-btn-right.snap.html
@@ -1,42 +1,52 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
-	<div aria-label="pd" class="sd-element sd-element--complex sd-element--with-frame sd-question sd-question--complex sd-question--paneldynamic sd-row__question" data-name="pd" id="testid0" role="group">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-paneldynamic">
-				<div class="sd-paneldynamic__panels-container">
-					<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--in-row sd-paneldynamic__panel-wrapper--list">
-						<div class="sd-element sd-element--complex sd-panel sd-row__panel" id="testid0panel0">
-							<div class="sd-element__content sd-panel__content" id="testid0panel0_content" role="group">
-								<div class="sd-clearfix sd-row">
-									<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-										<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="q1" id="testid0panel0question0">
-											<div class="sd-question__content sd-question__content--text" role="presentation">
-												<div class="sd-formbox sd-text">
-													<input aria-invalid="false" aria-label="q1" aria-required="false" class="sd-formbox__input" id="testid0panel0question0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
+		<div aria-label="pd" class="sd-element sd-element--complex sd-element--with-frame sd-question sd-question--complex sd-question--paneldynamic sd-row__question" data-name="pd" id="testid0" role="group">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-paneldynamic">
+							<div class="sd-paneldynamic__panels-container">
+								<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--in-row sd-paneldynamic__panel-wrapper--list">
+									<div class="sd-element sd-element--complex sd-panel sd-row__panel" id="testid0panel0">
+										<div class="sd-element__content sd-panel__content" id="testid0panel0_content" role="group">
+											<div class="sd-clearfix sd-row">
+												<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+													<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="q1" id="testid0panel0question0">
+														<div class="sd-question__container">
+															<div class="sd-question__header-and-content-container">
+																<div class="sd-question__content sd-question__content--text" role="presentation">
+																	<div class="sd-formbox sd-text">
+																		<input aria-invalid="false" aria-label="q1" aria-required="false" class="sd-formbox__input" id="testid0panel0question0i" placeholder="" type="text">
+																	</div>
+																</div>
+															</div>
+														</div>
+													</div>
 												</div>
 											</div>
 										</div>
 									</div>
+									<div class="sd-action-bar__item">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--secondary sd-action--small sd-paneldynamic__btn sd-paneldynamic__remove-btn" role="button" tabindex="0" type="button">
+												<span class="sd-action__title">Remove</span>
+											</button>
+										</div>
+									</div>
 								</div>
 							</div>
-						</div>
-						<div class="sd-action-bar__item">
-							<div class="sd-action-bar__item-content">
-								<button class="sd-action sd-action--alert sd-action--secondary sd-action--small sd-paneldynamic__btn sd-paneldynamic__remove-btn" role="button" tabindex="0" type="button">
-									<span class="sd-action__title">Remove</span>
-								</button>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="sd-paneldynamic__footer">
-					<hr class="sd-paneldynamic__separator">
-						<div class="sd-paneldynamic__buttons-container">
-							<div class="sd-action-bar sd-action-bar--default-size">
-								<div class="sd-action-bar__item">
-									<div class="sd-action-bar__item-content">
-										<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" role="button" tabindex="0" type="button">
-											<span class="sd-action__title">Add new</span>
-										</button>
+							<div class="sd-paneldynamic__footer">
+								<hr class="sd-paneldynamic__separator">
+									<div class="sd-paneldynamic__buttons-container">
+										<div class="sd-action-bar sd-action-bar--default-size">
+											<div class="sd-action-bar__item">
+												<div class="sd-action-bar__item-content">
+													<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" role="button" tabindex="0" type="button">
+														<span class="sd-action__title">Add new</span>
+													</button>
+												</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/question-description-under-input.snap.html b/tests/markup/snapshots/question-description-under-input.snap.html
index ad6bb2ee02..8cfad0e926 100644
--- a/tests/markup/snapshots/question-description-under-input.snap.html
+++ b/tests/markup/snapshots/question-description-under-input.snap.html
@@ -1,6 +1,10 @@
-<div class="sd-formbox sd-text">
-	<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
-</div>
-<div class="sd-description sd-question__description sd-question__description--under-input" id="testid0_ariaDescription">
-	<span class="sv-string-viewer sv-string-viewer--multiline">Under input</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-text">
+			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+		</div>
+		<div class="sd-description sd-question__description sd-question__description--under-input" id="testid0_ariaDescription">
+			<span class="sv-string-viewer sv-string-viewer--multiline">Under input</span>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/question-errors-v2-bottom.snap.html b/tests/markup/snapshots/question-errors-v2-bottom.snap.html
index 9fd863fe83..9a6fb5acd3 100644
--- a/tests/markup/snapshots/question-errors-v2-bottom.snap.html
+++ b/tests/markup/snapshots/question-errors-v2-bottom.snap.html
@@ -1,26 +1,32 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--error sd-question--error-bottom sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-question__title--error sd-question__title--required sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-				<span>&nbsp;</span>
-				<span aria-hidden="true" class="sd-question__required-text">*</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-formbox--error sd-text">
-				<input aria-describedby="testid0_errors" aria-invalid="true" aria-labelledby="testid0_ariaTitle" aria-required="true" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
-			</div>
-		</div>
-		<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question" id="testid0_errors" role="alert">
-			<div>
-				<span aria-hidden="true">
-				</span>
-				<span class="sd-error__item">
-					<span class="sv-string-viewer">Response required.</span>
-				</span>
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--error sd-question--error-bottom sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-question__title--error sd-question__title--required sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+							<span>&nbsp;</span>
+							<span aria-hidden="true" class="sd-question__required-text">*</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-formbox--error sd-text">
+							<input aria-describedby="testid0_errors" aria-invalid="true" aria-labelledby="testid0_ariaTitle" aria-required="true" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
+				<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question" id="testid0_errors" role="alert">
+					<div>
+						<span aria-hidden="true">
+						</span>
+						<span class="sd-error__item">
+							<span class="sv-string-viewer">Response required.</span>
+						</span>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/question-errors-v2-top.snap.html b/tests/markup/snapshots/question-errors-v2-top.snap.html
index a10285d246..88b1a82c4b 100644
--- a/tests/markup/snapshots/question-errors-v2-top.snap.html
+++ b/tests/markup/snapshots/question-errors-v2-top.snap.html
@@ -1,26 +1,32 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--error sd-question--error-top sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0">
-		<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-element__erbox--above-element sd-error sd-question__erbox sd-question__erbox--above-question" id="testid0_errors" role="alert">
-			<div>
-				<span aria-hidden="true">
-				</span>
-				<span class="sd-error__item">
-					<span class="sv-string-viewer">Response required.</span>
-				</span>
-			</div>
-		</div>
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-question__title--error sd-question__title--required sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-				<span>&nbsp;</span>
-				<span aria-hidden="true" class="sd-question__required-text">*</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-formbox--error sd-text">
-				<input aria-describedby="testid0_errors" aria-invalid="true" aria-labelledby="testid0_ariaTitle" aria-required="true" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--error sd-question--error-top sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0">
+			<div class="sd-question__container">
+				<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-element__erbox--above-element sd-error sd-question__erbox sd-question__erbox--above-question" id="testid0_errors" role="alert">
+					<div>
+						<span aria-hidden="true">
+						</span>
+						<span class="sd-error__item">
+							<span class="sv-string-viewer">Response required.</span>
+						</span>
+					</div>
+				</div>
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-question__title--error sd-question__title--required sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+							<span>&nbsp;</span>
+							<span aria-hidden="true" class="sd-question__required-text">*</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-formbox--error sd-text">
+							<input aria-describedby="testid0_errors" aria-invalid="true" aria-labelledby="testid0_ariaTitle" aria-required="true" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/question-title-label.snap.html b/tests/markup/snapshots/question-title-label.snap.html
index 480c43be86..7a97e45914 100644
--- a/tests/markup/snapshots/question-title-label.snap.html
+++ b/tests/markup/snapshots/question-title-label.snap.html
@@ -1,13 +1,19 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<label class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</label>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<label class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+						</label>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/question-title-with-html.snap.html b/tests/markup/snapshots/question-title-with-html.snap.html
index f12dbfd92f..89c47ccc0d 100644
--- a/tests/markup/snapshots/question-title-with-html.snap.html
+++ b/tests/markup/snapshots/question-title-with-html.snap.html
@@ -1,13 +1,22 @@
-<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-	<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-	<span>&nbsp;</span>
-	<span class="sv-string-viewer sv-string-viewer--multiline">
-		<span style="font-size:12px;">
-			<strong>
-				<span style="font-family:Comic Sans MS,cursive;">
-					<span style="color:#f1c40f;">HI</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+		<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+			<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+			<span>&nbsp;</span>
+			<span class="sv-string-viewer sv-string-viewer--multiline">
+				<span style="font-size:12px;">
+					<strong>
+						<span style="font-family:Comic Sans MS,cursive;">
+							<span style="color:#f1c40f;">HI</span>
+						</span>
+					</strong>
 				</span>
-			</strong>
-		</span>
-	</span>
+			</span>
+		</div>
+	</div>
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-text">
+			<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/question-with-indent.snap.html b/tests/markup/snapshots/question-with-indent.snap.html
index 5d4c8252e9..96643fd4ef 100644
--- a/tests/markup/snapshots/question-with-indent.snap.html
+++ b/tests/markup/snapshots/question-with-indent.snap.html
@@ -1,15 +1,21 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0" style="--sv-element-add-padding-left:20px; --sv-element-add-padding-right:20px;">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">name</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0" style="--sv-element-add-padding-left:20px; --sv-element-add-padding-right:20px;">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">name</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/radiogroup-clear.snap.html b/tests/markup/snapshots/radiogroup-clear.snap.html
index 8007d3804f..307f8417e9 100644
--- a/tests/markup/snapshots/radiogroup-clear.snap.html
+++ b/tests/markup/snapshots/radiogroup-clear.snap.html
@@ -1,37 +1,41 @@
-<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-	<div class="sv-title-actions">
-		<span class="sv-title-actions__title">
-			<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-		</span>
-		<div class="sd-action-bar sd-action-bar--default-size sd-action-title-bar" style="opacity:0; overflow:hidden;">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button aria-labelledby="testid0_ariaTitle" class="sd-action sd-action--alert sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-						<span class="sd-action__title">Clear</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--secondary sd-action--small sv-dots__item" role="button" tabindex="0" title="More" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
-							<use xlink:href="#icon-more-24x24" class="">
-							</use>
-							<title class="">More</title>
-						</svg>
-					</button>
-					<div>
-						<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-							<div class="sv-popup__container">
-								<div class="sv-popup__body-content">
-									<div class="sv-popup__scrolling-content">
-										<div class="sv-popup__content">
-											<div class="sd-menu-list__container">
-												<div class="sd-menu-list__empty-container">
-													<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+		<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+			<div class="sv-title-actions">
+				<span class="sv-title-actions__title">
+					<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+				</span>
+				<div class="sd-action-bar sd-action-bar--default-size sd-action-title-bar" style="opacity:0; overflow:hidden;">
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button aria-labelledby="testid0_ariaTitle" class="sd-action sd-action--alert sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+								<span class="sd-action__title">Clear</span>
+							</button>
+						</div>
+					</div>
+					<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--neutral sd-action--secondary sd-action--small sv-dots__item" role="button" tabindex="0" title="More" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
+									<use xlink:href="#icon-more-24x24" class="">
+									</use>
+									<title class="">More</title>
+								</svg>
+							</button>
+							<div>
+								<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+									<div class="sv-popup__container">
+										<div class="sv-popup__body-content">
+											<div class="sv-popup__scrolling-content">
+												<div class="sv-popup__content">
+													<div class="sd-menu-list__container">
+														<div class="sd-menu-list__empty-container">
+															<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+														</div>
+														<ul class="sd-menu-list" role="menu" style="display:none;">
+														</ul>
+													</div>
 												</div>
-												<ul class="sd-menu-list" role="menu" style="display:none;">
-												</ul>
 											</div>
 										</div>
 									</div>
@@ -43,4 +47,36 @@
 			</div>
 		</div>
 	</div>
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-columns-head-foot.snap.html b/tests/markup/snapshots/radiogroup-columns-head-foot.snap.html
index 52e663388d..64e02ccc1b 100644
--- a/tests/markup/snapshots/radiogroup-columns-head-foot.snap.html
+++ b/tests/markup/snapshots/radiogroup-columns-head-foot.snap.html
@@ -1,9 +1,43 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-selectbase--multi-column">
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-selectbase--multi-column">
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+							<span class="sd-item__decorator sd-radio__decorator">
+								<svg class="sd-item__svg sd-radio__svg">
+									<use xlink:href="#icon-radio-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item1</span>
+							</span>
+						</label>
+					</div>
+				</div>
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+							<span class="sd-item__decorator sd-radio__decorator">
+								<svg class="sd-item__svg sd-radio__svg">
+									<use xlink:href="#icon-radio-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item2</span>
+							</span>
+						</label>
+					</div>
+				</div>
+			</div>
 			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
 				<label class="sd-selectbase__label">
-					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="none">
 					<span class="sd-item__decorator sd-radio__decorator">
 						<svg class="sd-item__svg sd-radio__svg">
 							<use xlink:href="#icon-radio-16x16" class="">
@@ -11,15 +45,13 @@
 						</svg>
 					</span>
 					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item1</span>
+						<span class="sv-string-viewer">None</span>
 					</span>
 				</label>
 			</div>
-		</div>
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
 			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
 				<label class="sd-selectbase__label">
-					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="other">
 					<span class="sd-item__decorator sd-radio__decorator">
 						<svg class="sd-item__svg sd-radio__svg">
 							<use xlink:href="#icon-radio-16x16" class="">
@@ -27,38 +59,10 @@
 						</svg>
 					</span>
 					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item2</span>
+						<span class="sv-string-viewer">Other (describe)</span>
 					</span>
 				</label>
 			</div>
-		</div>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="none">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">None</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="other">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-columns-mobile.snap.html b/tests/markup/snapshots/radiogroup-columns-mobile.snap.html
index 296b0d3dc5..acc72b32a7 100644
--- a/tests/markup/snapshots/radiogroup-columns-mobile.snap.html
+++ b/tests/markup/snapshots/radiogroup-columns-mobile.snap.html
@@ -1,44 +1,48 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase sd-selectbase--mobile" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase sd-selectbase--mobile" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="item3">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="item3">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-columns-no-head-foot.snap.html b/tests/markup/snapshots/radiogroup-columns-no-head-foot.snap.html
index 06591ca780..4018eeb2c9 100644
--- a/tests/markup/snapshots/radiogroup-columns-no-head-foot.snap.html
+++ b/tests/markup/snapshots/radiogroup-columns-no-head-foot.snap.html
@@ -1,64 +1,68 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-selectbase--multi-column">
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
-					<span class="sd-item__decorator sd-radio__decorator">
-						<svg class="sd-item__svg sd-radio__svg">
-							<use xlink:href="#icon-radio-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item1</span>
-					</span>
-				</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-selectbase--multi-column">
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+							<span class="sd-item__decorator sd-radio__decorator">
+								<svg class="sd-item__svg sd-radio__svg">
+									<use xlink:href="#icon-radio-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item1</span>
+							</span>
+						</label>
+					</div>
+					<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="none">
+							<span class="sd-item__decorator sd-radio__decorator">
+								<svg class="sd-item__svg sd-radio__svg">
+									<use xlink:href="#icon-radio-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">None</span>
+							</span>
+						</label>
+					</div>
+				</div>
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+							<span class="sd-item__decorator sd-radio__decorator">
+								<svg class="sd-item__svg sd-radio__svg">
+									<use xlink:href="#icon-radio-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item2</span>
+							</span>
+						</label>
+					</div>
+					<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="other">
+							<span class="sd-item__decorator sd-radio__decorator">
+								<svg class="sd-item__svg sd-radio__svg">
+									<use xlink:href="#icon-radio-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">Other (describe)</span>
+							</span>
+						</label>
+					</div>
+				</div>
 			</div>
-			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="none">
-					<span class="sd-item__decorator sd-radio__decorator">
-						<svg class="sd-item__svg sd-radio__svg">
-							<use xlink:href="#icon-radio-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">None</span>
-					</span>
-				</label>
-			</div>
-		</div>
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
-					<span class="sd-item__decorator sd-radio__decorator">
-						<svg class="sd-item__svg sd-radio__svg">
-							<use xlink:href="#icon-radio-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item2</span>
-					</span>
-				</label>
-			</div>
-			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="other">
-					<span class="sd-item__decorator sd-radio__decorator">
-						<svg class="sd-item__svg sd-radio__svg">
-							<use xlink:href="#icon-radio-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">Other (describe)</span>
-					</span>
-				</label>
-			</div>
-		</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-columns.snap.html b/tests/markup/snapshots/radiogroup-columns.snap.html
index 282171c622..2e4558bc02 100644
--- a/tests/markup/snapshots/radiogroup-columns.snap.html
+++ b/tests/markup/snapshots/radiogroup-columns.snap.html
@@ -1,36 +1,40 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-selectbase--multi-column">
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
-					<span class="sd-item__decorator sd-radio__decorator">
-						<svg class="sd-item__svg sd-radio__svg">
-							<use xlink:href="#icon-radio-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item1</span>
-					</span>
-				</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-selectbase--multi-column">
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+							<span class="sd-item__decorator sd-radio__decorator">
+								<svg class="sd-item__svg sd-radio__svg">
+									<use xlink:href="#icon-radio-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item1</span>
+							</span>
+						</label>
+					</div>
+				</div>
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+							<span class="sd-item__decorator sd-radio__decorator">
+								<svg class="sd-item__svg sd-radio__svg">
+									<use xlink:href="#icon-radio-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item2</span>
+							</span>
+						</label>
+					</div>
+				</div>
 			</div>
-		</div>
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
-					<span class="sd-item__decorator sd-radio__decorator">
-						<svg class="sd-item__svg sd-radio__svg">
-							<use xlink:href="#icon-radio-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item2</span>
-					</span>
-				</label>
-			</div>
-		</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-disabled.snap.html b/tests/markup/snapshots/radiogroup-disabled.snap.html
index fe242b2923..57cc4f5385 100644
--- a/tests/markup/snapshots/radiogroup-disabled.snap.html
+++ b/tests/markup/snapshots/radiogroup-disabled.snap.html
@@ -1,44 +1,48 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-radio sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_0" name="name_testid0" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-editor" contenteditable="true">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-radio sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-editor" contenteditable="true">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-radio sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-editor" contenteditable="true">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-radio sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_2" name="name_testid0" type="radio" value="item3">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-editor" contenteditable="true">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-radio sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_1" name="name_testid0" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-editor" contenteditable="true">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-radio sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_2" name="name_testid0" type="radio" value="item3">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-editor" contenteditable="true">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-modern.snap.html b/tests/markup/snapshots/radiogroup-modern.snap.html
index e544fae83c..665c155870 100644
--- a/tests/markup/snapshots/radiogroup-modern.snap.html
+++ b/tests/markup/snapshots/radiogroup-modern.snap.html
@@ -1,30 +1,34 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-multiple-comments.snap.html b/tests/markup/snapshots/radiogroup-multiple-comments.snap.html
index 6ceef4366c..4adddacf3d 100644
--- a/tests/markup/snapshots/radiogroup-multiple-comments.snap.html
+++ b/tests/markup/snapshots/radiogroup-multiple-comments.snap.html
@@ -1,56 +1,60 @@
-<fieldset aria-invalid="false" aria-label="name" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-item--checked sd-radio sd-radio--allowhover sd-radio--checked sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
-	</div>
-	<div class="form-group sd-question__comment-area sd-selectbase__other">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="name" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="name" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-item--checked sd-radio sd-radio--allowhover sd-radio--checked sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
 			</div>
-		</div>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="other">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
+			<div class="form-group sd-question__comment-area sd-selectbase__other">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="name" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="other">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-other.snap.html b/tests/markup/snapshots/radiogroup-other.snap.html
index b85e0c8dda..25774d58e8 100644
--- a/tests/markup/snapshots/radiogroup-other.snap.html
+++ b/tests/markup/snapshots/radiogroup-other.snap.html
@@ -1,70 +1,74 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item3">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-item--checked sd-radio sd-radio--allowhover sd-radio--checked sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="other">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-	<div class="form-group sd-question__comment-area sd-selectbase__other">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item3">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-item--checked sd-radio sd-radio--allowhover sd-radio--checked sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="other">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+			<div class="form-group sd-question__comment-area sd-selectbase__other">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
 			</div>
-		</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-readonly-selected.snap.html b/tests/markup/snapshots/radiogroup-readonly-selected.snap.html
index efb9d13188..36e177429d 100644
--- a/tests/markup/snapshots/radiogroup-readonly-selected.snap.html
+++ b/tests/markup/snapshots/radiogroup-readonly-selected.snap.html
@@ -1,44 +1,48 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-item--checked sd-item--readonly sd-radio sd-radio--allowhover sd-radio--checked sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-item--checked sd-item--readonly sd-radio sd-radio--allowhover sd-radio--checked sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" readonly="" type="radio" value="item3">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" readonly="" type="radio" value="item3">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-readonly.snap.html b/tests/markup/snapshots/radiogroup-readonly.snap.html
index b7e102fc60..9bbe0d78ed 100644
--- a/tests/markup/snapshots/radiogroup-readonly.snap.html
+++ b/tests/markup/snapshots/radiogroup-readonly.snap.html
@@ -1,44 +1,48 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" readonly="" type="radio" value="item3">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" readonly="" type="radio" value="item3">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-row-head-foot.snap.html b/tests/markup/snapshots/radiogroup-row-head-foot.snap.html
index ae87bfdccb..6a64c8cee1 100644
--- a/tests/markup/snapshots/radiogroup-row-head-foot.snap.html
+++ b/tests/markup/snapshots/radiogroup-row-head-foot.snap.html
@@ -1,60 +1,64 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-selectbase--row">
-		<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">item1</span>
-				</span>
-			</label>
-		</div>
-		<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">item2</span>
-				</span>
-			</label>
-		</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-selectbase--row">
+				<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">item1</span>
+						</span>
+					</label>
+				</div>
+				<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">item2</span>
+						</span>
+					</label>
+				</div>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="none">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">None</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="other">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="none">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">None</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="other">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-row-no-head-foot.snap.html b/tests/markup/snapshots/radiogroup-row-no-head-foot.snap.html
index 174cff3121..2f9da614ba 100644
--- a/tests/markup/snapshots/radiogroup-row-no-head-foot.snap.html
+++ b/tests/markup/snapshots/radiogroup-row-no-head-foot.snap.html
@@ -1,58 +1,62 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase sd-selectbase--row" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase sd-selectbase--row" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="none">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">None</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="other">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="none">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">None</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="other">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-v2.snap.html b/tests/markup/snapshots/radiogroup-v2.snap.html
index e544fae83c..665c155870 100644
--- a/tests/markup/snapshots/radiogroup-v2.snap.html
+++ b/tests/markup/snapshots/radiogroup-v2.snap.html
@@ -1,30 +1,34 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup.snap.html b/tests/markup/snapshots/radiogroup.snap.html
index d7e8005c90..99f5126d30 100644
--- a/tests/markup/snapshots/radiogroup.snap.html
+++ b/tests/markup/snapshots/radiogroup.snap.html
@@ -1,44 +1,48 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="item3">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="item3">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/ranking-design.snap.html b/tests/markup/snapshots/ranking-design.snap.html
index 247658f1cb..f54da1fe77 100644
--- a/tests/markup/snapshots/ranking-design.snap.html
+++ b/tests/markup/snapshots/ranking-design.snap.html
@@ -1,81 +1,85 @@
-<div class="sv-ranking sv-ranking--design-mode sv-ranking--select-to-rank-empty-value">
-	<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" >
-		<div style="outline:none;" tabindex="-1">
-			<div class="sv-ranking-item__ghost">
-			</div>
-			<div class="sd-ranking-item__content sv-ranking-item__content">
-				<div class="sv-ranking-item__icon-container">
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-						<use xlink:href="#icon-drag-24x24" class="">
-						</use>
-					</svg>
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-						<use xlink:href="#icon-reorder-24x24" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-					<svg class="">
-						<use xlink:href="#icon-rankingundefined-16x16" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sv-ranking-item__text">
-					<span class="sv-string-editor" contenteditable="true">item1</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sv-ranking sv-ranking--design-mode sv-ranking--select-to-rank-empty-value">
+			<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0">
+				<div style="outline:none;" tabindex="-1">
+					<div class="sv-ranking-item__ghost">
+					</div>
+					<div class="sd-ranking-item__content sv-ranking-item__content">
+						<div class="sv-ranking-item__icon-container">
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+								<use xlink:href="#icon-drag-24x24" class="">
+								</use>
+							</svg>
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+								<use xlink:href="#icon-reorder-24x24" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+							<svg class="">
+								<use xlink:href="#icon-rankingundefined-16x16" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sv-ranking-item__text">
+							<span class="sv-string-editor" contenteditable="true">item1</span>
+						</div>
+					</div>
 				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" >
-		<div style="outline:none;" tabindex="-1">
-			<div class="sv-ranking-item__ghost">
-			</div>
-			<div class="sd-ranking-item__content sv-ranking-item__content">
-				<div class="sv-ranking-item__icon-container">
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-						<use xlink:href="#icon-drag-24x24" class="">
-						</use>
-					</svg>
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-						<use xlink:href="#icon-reorder-24x24" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-					<svg class="">
-						<use xlink:href="#icon-rankingundefined-16x16" class="">
-						</use>
-					</svg>
+			<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1">
+				<div style="outline:none;" tabindex="-1">
+					<div class="sv-ranking-item__ghost">
+					</div>
+					<div class="sd-ranking-item__content sv-ranking-item__content">
+						<div class="sv-ranking-item__icon-container">
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+								<use xlink:href="#icon-drag-24x24" class="">
+								</use>
+							</svg>
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+								<use xlink:href="#icon-reorder-24x24" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+							<svg class="">
+								<use xlink:href="#icon-rankingundefined-16x16" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sv-ranking-item__text">
+							<span class="sv-string-editor" contenteditable="true">item2</span>
+						</div>
+					</div>
 				</div>
-				<div class="sv-ranking-item__text">
-					<span class="sv-string-editor" contenteditable="true">item2</span>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" >
-		<div style="outline:none;" tabindex="-1">
-			<div class="sv-ranking-item__ghost">
 			</div>
-			<div class="sd-ranking-item__content sv-ranking-item__content">
-				<div class="sv-ranking-item__icon-container">
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-						<use xlink:href="#icon-drag-24x24" class="">
-						</use>
-					</svg>
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-						<use xlink:href="#icon-reorder-24x24" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-					<svg class="">
-						<use xlink:href="#icon-rankingundefined-16x16" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sv-ranking-item__text">
-					<span class="sv-string-editor" contenteditable="true">item3</span>
+			<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2">
+				<div style="outline:none;" tabindex="-1">
+					<div class="sv-ranking-item__ghost">
+					</div>
+					<div class="sd-ranking-item__content sv-ranking-item__content">
+						<div class="sv-ranking-item__icon-container">
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+								<use xlink:href="#icon-drag-24x24" class="">
+								</use>
+							</svg>
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+								<use xlink:href="#icon-reorder-24x24" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+							<svg class="">
+								<use xlink:href="#icon-rankingundefined-16x16" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sv-ranking-item__text">
+							<span class="sv-string-editor" contenteditable="true">item3</span>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/ranking-selectToRankEnabled-SwapAreas.snap.html b/tests/markup/snapshots/ranking-selectToRankEnabled-SwapAreas.snap.html
index 65515370a2..a211b01184 100644
--- a/tests/markup/snapshots/ranking-selectToRankEnabled-SwapAreas.snap.html
+++ b/tests/markup/snapshots/ranking-selectToRankEnabled-SwapAreas.snap.html
@@ -1,92 +1,96 @@
-<div class="sv-ranking sv-ranking--select-to-rank sv-ranking--select-to-rank-empty-value sv-ranking--select-to-rank-horizontal sv-ranking--select-to-rank-swap-areas">
-	<div class="sv-ranking__container sv-ranking__container--from" data-ranking="from-container">
-		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
-			<div style="outline:none;" tabindex="-1">
-				<div class="sv-ranking-item__ghost">
-				</div>
-				<div class="sd-ranking-item__content sv-ranking-item__content">
-					<div class="sv-ranking-item__icon-container">
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-							<use xlink:href="#icon-drag-24x24" class="">
-							</use>
-						</svg>
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-							<use xlink:href="#icon-reorder-24x24" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-						<svg class="">
-							<use xlink:href="#icon-rankingundefined-16x16" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sv-ranking-item__text">
-						<span class="sv-string-viewer">item1</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content sd-question__content--support-container-queries" role="presentation">
+		<div class="sv-ranking sv-ranking--select-to-rank sv-ranking--select-to-rank-empty-value sv-ranking--select-to-rank-horizontal sv-ranking--select-to-rank-swap-areas">
+			<div class="sv-ranking__container sv-ranking__container--from" data-ranking="from-container">
+				<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
+					<div style="outline:none;" tabindex="-1">
+						<div class="sv-ranking-item__ghost">
+						</div>
+						<div class="sd-ranking-item__content sv-ranking-item__content">
+							<div class="sv-ranking-item__icon-container">
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+									<use xlink:href="#icon-drag-24x24" class="">
+									</use>
+								</svg>
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+									<use xlink:href="#icon-reorder-24x24" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+								<svg class="">
+									<use xlink:href="#icon-rankingundefined-16x16" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sv-ranking-item__text">
+								<span class="sv-string-viewer">item1</span>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
-			<div style="outline:none;" tabindex="-1">
-				<div class="sv-ranking-item__ghost">
-				</div>
-				<div class="sd-ranking-item__content sv-ranking-item__content">
-					<div class="sv-ranking-item__icon-container">
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-							<use xlink:href="#icon-drag-24x24" class="">
-							</use>
-						</svg>
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-							<use xlink:href="#icon-reorder-24x24" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-						<svg class="">
-							<use xlink:href="#icon-rankingundefined-16x16" class="">
-							</use>
-						</svg>
+				<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
+					<div style="outline:none;" tabindex="-1">
+						<div class="sv-ranking-item__ghost">
+						</div>
+						<div class="sd-ranking-item__content sv-ranking-item__content">
+							<div class="sv-ranking-item__icon-container">
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+									<use xlink:href="#icon-drag-24x24" class="">
+									</use>
+								</svg>
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+									<use xlink:href="#icon-reorder-24x24" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+								<svg class="">
+									<use xlink:href="#icon-rankingundefined-16x16" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sv-ranking-item__text">
+								<span class="sv-string-viewer">item2</span>
+							</div>
+						</div>
 					</div>
-					<div class="sv-ranking-item__text">
-						<span class="sv-string-viewer">item2</span>
+				</div>
+				<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
+					<div style="outline:none;" tabindex="-1">
+						<div class="sv-ranking-item__ghost">
+						</div>
+						<div class="sd-ranking-item__content sv-ranking-item__content">
+							<div class="sv-ranking-item__icon-container">
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+									<use xlink:href="#icon-drag-24x24" class="">
+									</use>
+								</svg>
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+									<use xlink:href="#icon-reorder-24x24" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+								<svg class="">
+									<use xlink:href="#icon-rankingundefined-16x16" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sv-ranking-item__text">
+								<span class="sv-string-viewer">item3</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
-		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
-			<div style="outline:none;" tabindex="-1">
-				<div class="sv-ranking-item__ghost">
-				</div>
-				<div class="sd-ranking-item__content sv-ranking-item__content">
-					<div class="sv-ranking-item__icon-container">
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-							<use xlink:href="#icon-drag-24x24" class="">
-							</use>
-						</svg>
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-							<use xlink:href="#icon-reorder-24x24" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-						<svg class="">
-							<use xlink:href="#icon-rankingundefined-16x16" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sv-ranking-item__text">
-						<span class="sv-string-viewer">item3</span>
-					</div>
+			<div class="sv-ranking__containers-divider">
+			</div>
+			<div class="sv-ranking__container sv-ranking__container--empty sv-ranking__container--to" data-ranking="to-container">
+				<div class="sv-ranking__container-placeholder">
+					<span class="sv-string-viewer sv-string-viewer--multiline">Drag choices here to rank them</span>
 				</div>
 			</div>
 		</div>
 	</div>
-	<div class="sv-ranking__containers-divider">
-	</div>
-	<div class="sv-ranking__container sv-ranking__container--empty sv-ranking__container--to" data-ranking="to-container">
-		<div class="sv-ranking__container-placeholder">
-			<span class="sv-string-viewer sv-string-viewer--multiline">Drag choices here to rank them</span>
-		</div>
-	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/ranking-selectToRankEnabled-empty.snap.html b/tests/markup/snapshots/ranking-selectToRankEnabled-empty.snap.html
index a3ec52fa81..420155553c 100644
--- a/tests/markup/snapshots/ranking-selectToRankEnabled-empty.snap.html
+++ b/tests/markup/snapshots/ranking-selectToRankEnabled-empty.snap.html
@@ -1,92 +1,96 @@
-<div class="sv-ranking sv-ranking--select-to-rank sv-ranking--select-to-rank-empty-value sv-ranking--select-to-rank-horizontal">
-	<div class="sv-ranking__container sv-ranking__container--from" data-ranking="from-container">
-		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
-			<div style="outline:none;" tabindex="-1">
-				<div class="sv-ranking-item__ghost">
-				</div>
-				<div class="sd-ranking-item__content sv-ranking-item__content">
-					<div class="sv-ranking-item__icon-container">
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-							<use xlink:href="#icon-drag-24x24" class="">
-							</use>
-						</svg>
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-							<use xlink:href="#icon-reorder-24x24" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-						<svg class="">
-							<use xlink:href="#icon-rankingundefined-16x16" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sv-ranking-item__text">
-						<span class="sv-string-viewer">item1</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content sd-question__content--support-container-queries" role="presentation">
+		<div class="sv-ranking sv-ranking--select-to-rank sv-ranking--select-to-rank-empty-value sv-ranking--select-to-rank-horizontal">
+			<div class="sv-ranking__container sv-ranking__container--from" data-ranking="from-container">
+				<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
+					<div style="outline:none;" tabindex="-1">
+						<div class="sv-ranking-item__ghost">
+						</div>
+						<div class="sd-ranking-item__content sv-ranking-item__content">
+							<div class="sv-ranking-item__icon-container">
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+									<use xlink:href="#icon-drag-24x24" class="">
+									</use>
+								</svg>
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+									<use xlink:href="#icon-reorder-24x24" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+								<svg class="">
+									<use xlink:href="#icon-rankingundefined-16x16" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sv-ranking-item__text">
+								<span class="sv-string-viewer">item1</span>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
-			<div style="outline:none;" tabindex="-1">
-				<div class="sv-ranking-item__ghost">
-				</div>
-				<div class="sd-ranking-item__content sv-ranking-item__content">
-					<div class="sv-ranking-item__icon-container">
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-							<use xlink:href="#icon-drag-24x24" class="">
-							</use>
-						</svg>
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-							<use xlink:href="#icon-reorder-24x24" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-						<svg class="">
-							<use xlink:href="#icon-rankingundefined-16x16" class="">
-							</use>
-						</svg>
+				<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
+					<div style="outline:none;" tabindex="-1">
+						<div class="sv-ranking-item__ghost">
+						</div>
+						<div class="sd-ranking-item__content sv-ranking-item__content">
+							<div class="sv-ranking-item__icon-container">
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+									<use xlink:href="#icon-drag-24x24" class="">
+									</use>
+								</svg>
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+									<use xlink:href="#icon-reorder-24x24" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+								<svg class="">
+									<use xlink:href="#icon-rankingundefined-16x16" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sv-ranking-item__text">
+								<span class="sv-string-viewer">item2</span>
+							</div>
+						</div>
 					</div>
-					<div class="sv-ranking-item__text">
-						<span class="sv-string-viewer">item2</span>
+				</div>
+				<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
+					<div style="outline:none;" tabindex="-1">
+						<div class="sv-ranking-item__ghost">
+						</div>
+						<div class="sd-ranking-item__content sv-ranking-item__content">
+							<div class="sv-ranking-item__icon-container">
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+									<use xlink:href="#icon-drag-24x24" class="">
+									</use>
+								</svg>
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+									<use xlink:href="#icon-reorder-24x24" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+								<svg class="">
+									<use xlink:href="#icon-rankingundefined-16x16" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sv-ranking-item__text">
+								<span class="sv-string-viewer">item3</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
-		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
-			<div style="outline:none;" tabindex="-1">
-				<div class="sv-ranking-item__ghost">
-				</div>
-				<div class="sd-ranking-item__content sv-ranking-item__content">
-					<div class="sv-ranking-item__icon-container">
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-							<use xlink:href="#icon-drag-24x24" class="">
-							</use>
-						</svg>
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-							<use xlink:href="#icon-reorder-24x24" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-						<svg class="">
-							<use xlink:href="#icon-rankingundefined-16x16" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sv-ranking-item__text">
-						<span class="sv-string-viewer">item3</span>
-					</div>
+			<div class="sv-ranking__containers-divider">
+			</div>
+			<div class="sv-ranking__container sv-ranking__container--empty sv-ranking__container--to" data-ranking="to-container">
+				<div class="sv-ranking__container-placeholder">
+					<span class="sv-string-viewer sv-string-viewer--multiline">Drag choices here to rank them</span>
 				</div>
 			</div>
 		</div>
 	</div>
-	<div class="sv-ranking__containers-divider">
-	</div>
-	<div class="sv-ranking__container sv-ranking__container--empty sv-ranking__container--to" data-ranking="to-container">
-		<div class="sv-ranking__container-placeholder">
-			<span class="sv-string-viewer sv-string-viewer--multiline">Drag choices here to rank them</span>
-		</div>
-	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/ranking-selectToRankEnabled-vertical.snap.html b/tests/markup/snapshots/ranking-selectToRankEnabled-vertical.snap.html
index 78c72b01d6..0bf3674cf1 100644
--- a/tests/markup/snapshots/ranking-selectToRankEnabled-vertical.snap.html
+++ b/tests/markup/snapshots/ranking-selectToRankEnabled-vertical.snap.html
@@ -1,92 +1,96 @@
-<div class="sv-ranking sv-ranking--select-to-rank sv-ranking--select-to-rank-empty-value sv-ranking--select-to-rank-vertical">
-	<div class="sv-ranking__container sv-ranking__container--from" data-ranking="from-container">
-		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
-			<div style="outline:none;" tabindex="-1">
-				<div class="sv-ranking-item__ghost">
-				</div>
-				<div class="sd-ranking-item__content sv-ranking-item__content">
-					<div class="sv-ranking-item__icon-container">
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-							<use xlink:href="#icon-drag-24x24" class="">
-							</use>
-						</svg>
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-							<use xlink:href="#icon-reorder-24x24" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-						<svg class="">
-							<use xlink:href="#icon-rankingundefined-16x16" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sv-ranking-item__text">
-						<span class="sv-string-viewer">item1</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content sd-question__content--support-container-queries" role="presentation">
+		<div class="sv-ranking sv-ranking--select-to-rank sv-ranking--select-to-rank-empty-value sv-ranking--select-to-rank-vertical">
+			<div class="sv-ranking__container sv-ranking__container--from" data-ranking="from-container">
+				<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
+					<div style="outline:none;" tabindex="-1">
+						<div class="sv-ranking-item__ghost">
+						</div>
+						<div class="sd-ranking-item__content sv-ranking-item__content">
+							<div class="sv-ranking-item__icon-container">
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+									<use xlink:href="#icon-drag-24x24" class="">
+									</use>
+								</svg>
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+									<use xlink:href="#icon-reorder-24x24" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+								<svg class="">
+									<use xlink:href="#icon-rankingundefined-16x16" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sv-ranking-item__text">
+								<span class="sv-string-viewer">item1</span>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
-			<div style="outline:none;" tabindex="-1">
-				<div class="sv-ranking-item__ghost">
-				</div>
-				<div class="sd-ranking-item__content sv-ranking-item__content">
-					<div class="sv-ranking-item__icon-container">
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-							<use xlink:href="#icon-drag-24x24" class="">
-							</use>
-						</svg>
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-							<use xlink:href="#icon-reorder-24x24" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-						<svg class="">
-							<use xlink:href="#icon-rankingundefined-16x16" class="">
-							</use>
-						</svg>
+				<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
+					<div style="outline:none;" tabindex="-1">
+						<div class="sv-ranking-item__ghost">
+						</div>
+						<div class="sd-ranking-item__content sv-ranking-item__content">
+							<div class="sv-ranking-item__icon-container">
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+									<use xlink:href="#icon-drag-24x24" class="">
+									</use>
+								</svg>
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+									<use xlink:href="#icon-reorder-24x24" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+								<svg class="">
+									<use xlink:href="#icon-rankingundefined-16x16" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sv-ranking-item__text">
+								<span class="sv-string-viewer">item2</span>
+							</div>
+						</div>
 					</div>
-					<div class="sv-ranking-item__text">
-						<span class="sv-string-viewer">item2</span>
+				</div>
+				<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
+					<div style="outline:none;" tabindex="-1">
+						<div class="sv-ranking-item__ghost">
+						</div>
+						<div class="sd-ranking-item__content sv-ranking-item__content">
+							<div class="sv-ranking-item__icon-container">
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+									<use xlink:href="#icon-drag-24x24" class="">
+									</use>
+								</svg>
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+									<use xlink:href="#icon-reorder-24x24" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+								<svg class="">
+									<use xlink:href="#icon-rankingundefined-16x16" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sv-ranking-item__text">
+								<span class="sv-string-viewer">item3</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
-		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
-			<div style="outline:none;" tabindex="-1">
-				<div class="sv-ranking-item__ghost">
-				</div>
-				<div class="sd-ranking-item__content sv-ranking-item__content">
-					<div class="sv-ranking-item__icon-container">
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-							<use xlink:href="#icon-drag-24x24" class="">
-							</use>
-						</svg>
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-							<use xlink:href="#icon-reorder-24x24" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-						<svg class="">
-							<use xlink:href="#icon-rankingundefined-16x16" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sv-ranking-item__text">
-						<span class="sv-string-viewer">item3</span>
-					</div>
+			<div class="sv-ranking__containers-divider">
+			</div>
+			<div class="sv-ranking__container sv-ranking__container--empty sv-ranking__container--to" data-ranking="to-container">
+				<div class="sv-ranking__container-placeholder">
+					<span class="sv-string-viewer sv-string-viewer--multiline">Drag choices here to rank them</span>
 				</div>
 			</div>
 		</div>
 	</div>
-	<div class="sv-ranking__containers-divider">
-	</div>
-	<div class="sv-ranking__container sv-ranking__container--empty sv-ranking__container--to" data-ranking="to-container">
-		<div class="sv-ranking__container-placeholder">
-			<span class="sv-string-viewer sv-string-viewer--multiline">Drag choices here to rank them</span>
-		</div>
-	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/ranking-values.snap.html b/tests/markup/snapshots/ranking-values.snap.html
index da9645e181..7411564dd5 100644
--- a/tests/markup/snapshots/ranking-values.snap.html
+++ b/tests/markup/snapshots/ranking-values.snap.html
@@ -1,66 +1,70 @@
-<div class="sv-ranking">
-	<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
-		<div style="outline:none;" tabindex="-1">
-			<div class="sv-ranking-item__ghost">
-			</div>
-			<div class="sd-ranking-item__content sv-ranking-item__content">
-				<div class="sv-ranking-item__icon-container">
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-						<use xlink:href="#icon-drag-24x24" class="">
-						</use>
-					</svg>
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-						<use xlink:href="#icon-reorder-24x24" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sd-ranking-item__index sv-ranking-item__index">1</div>
-				<div class="sv-ranking-item__text">
-					<span class="sv-string-viewer">item1</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sv-ranking">
+			<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
+				<div style="outline:none;" tabindex="-1">
+					<div class="sv-ranking-item__ghost">
+					</div>
+					<div class="sd-ranking-item__content sv-ranking-item__content">
+						<div class="sv-ranking-item__icon-container">
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+								<use xlink:href="#icon-drag-24x24" class="">
+								</use>
+							</svg>
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+								<use xlink:href="#icon-reorder-24x24" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sd-ranking-item__index sv-ranking-item__index">1</div>
+						<div class="sv-ranking-item__text">
+							<span class="sv-string-viewer">item1</span>
+						</div>
+					</div>
 				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
-		<div style="outline:none;" tabindex="-1">
-			<div class="sv-ranking-item__ghost">
-			</div>
-			<div class="sd-ranking-item__content sv-ranking-item__content">
-				<div class="sv-ranking-item__icon-container">
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-						<use xlink:href="#icon-drag-24x24" class="">
-						</use>
-					</svg>
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-						<use xlink:href="#icon-reorder-24x24" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sd-ranking-item__index sv-ranking-item__index">2</div>
-				<div class="sv-ranking-item__text">
-					<span class="sv-string-viewer">item2</span>
+			<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
+				<div style="outline:none;" tabindex="-1">
+					<div class="sv-ranking-item__ghost">
+					</div>
+					<div class="sd-ranking-item__content sv-ranking-item__content">
+						<div class="sv-ranking-item__icon-container">
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+								<use xlink:href="#icon-drag-24x24" class="">
+								</use>
+							</svg>
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+								<use xlink:href="#icon-reorder-24x24" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sd-ranking-item__index sv-ranking-item__index">2</div>
+						<div class="sv-ranking-item__text">
+							<span class="sv-string-viewer">item2</span>
+						</div>
+					</div>
 				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
-		<div style="outline:none;" tabindex="-1">
-			<div class="sv-ranking-item__ghost">
-			</div>
-			<div class="sd-ranking-item__content sv-ranking-item__content">
-				<div class="sv-ranking-item__icon-container">
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-						<use xlink:href="#icon-drag-24x24" class="">
-						</use>
-					</svg>
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-						<use xlink:href="#icon-reorder-24x24" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sd-ranking-item__index sv-ranking-item__index">3</div>
-				<div class="sv-ranking-item__text">
-					<span class="sv-string-viewer">item3</span>
+			<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
+				<div style="outline:none;" tabindex="-1">
+					<div class="sv-ranking-item__ghost">
+					</div>
+					<div class="sd-ranking-item__content sv-ranking-item__content">
+						<div class="sv-ranking-item__icon-container">
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+								<use xlink:href="#icon-drag-24x24" class="">
+								</use>
+							</svg>
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+								<use xlink:href="#icon-reorder-24x24" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sd-ranking-item__index sv-ranking-item__index">3</div>
+						<div class="sv-ranking-item__text">
+							<span class="sv-string-viewer">item3</span>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/ranking.snap.html b/tests/markup/snapshots/ranking.snap.html
index 1981f9a913..c646513784 100644
--- a/tests/markup/snapshots/ranking.snap.html
+++ b/tests/markup/snapshots/ranking.snap.html
@@ -1,81 +1,85 @@
-<div class="sv-ranking sv-ranking--select-to-rank-empty-value">
-	<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
-		<div style="outline:none;" tabindex="-1">
-			<div class="sv-ranking-item__ghost">
-			</div>
-			<div class="sd-ranking-item__content sv-ranking-item__content">
-				<div class="sv-ranking-item__icon-container">
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-						<use xlink:href="#icon-drag-24x24" class="">
-						</use>
-					</svg>
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-						<use xlink:href="#icon-reorder-24x24" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-					<svg class="">
-						<use xlink:href="#icon-rankingundefined-16x16" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sv-ranking-item__text">
-					<span class="sv-string-viewer">item1</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sv-ranking sv-ranking--select-to-rank-empty-value">
+			<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
+				<div style="outline:none;" tabindex="-1">
+					<div class="sv-ranking-item__ghost">
+					</div>
+					<div class="sd-ranking-item__content sv-ranking-item__content">
+						<div class="sv-ranking-item__icon-container">
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+								<use xlink:href="#icon-drag-24x24" class="">
+								</use>
+							</svg>
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+								<use xlink:href="#icon-reorder-24x24" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+							<svg class="">
+								<use xlink:href="#icon-rankingundefined-16x16" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sv-ranking-item__text">
+							<span class="sv-string-viewer">item1</span>
+						</div>
+					</div>
 				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
-		<div style="outline:none;" tabindex="-1">
-			<div class="sv-ranking-item__ghost">
-			</div>
-			<div class="sd-ranking-item__content sv-ranking-item__content">
-				<div class="sv-ranking-item__icon-container">
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-						<use xlink:href="#icon-drag-24x24" class="">
-						</use>
-					</svg>
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-						<use xlink:href="#icon-reorder-24x24" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-					<svg class="">
-						<use xlink:href="#icon-rankingundefined-16x16" class="">
-						</use>
-					</svg>
+			<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
+				<div style="outline:none;" tabindex="-1">
+					<div class="sv-ranking-item__ghost">
+					</div>
+					<div class="sd-ranking-item__content sv-ranking-item__content">
+						<div class="sv-ranking-item__icon-container">
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+								<use xlink:href="#icon-drag-24x24" class="">
+								</use>
+							</svg>
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+								<use xlink:href="#icon-reorder-24x24" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+							<svg class="">
+								<use xlink:href="#icon-rankingundefined-16x16" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sv-ranking-item__text">
+							<span class="sv-string-viewer">item2</span>
+						</div>
+					</div>
 				</div>
-				<div class="sv-ranking-item__text">
-					<span class="sv-string-viewer">item2</span>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
-		<div style="outline:none;" tabindex="-1">
-			<div class="sv-ranking-item__ghost">
 			</div>
-			<div class="sd-ranking-item__content sv-ranking-item__content">
-				<div class="sv-ranking-item__icon-container">
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-						<use xlink:href="#icon-drag-24x24" class="">
-						</use>
-					</svg>
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-						<use xlink:href="#icon-reorder-24x24" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-					<svg class="">
-						<use xlink:href="#icon-rankingundefined-16x16" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sv-ranking-item__text">
-					<span class="sv-string-viewer">item3</span>
+			<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
+				<div style="outline:none;" tabindex="-1">
+					<div class="sv-ranking-item__ghost">
+					</div>
+					<div class="sd-ranking-item__content sv-ranking-item__content">
+						<div class="sv-ranking-item__icon-container">
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+								<use xlink:href="#icon-drag-24x24" class="">
+								</use>
+							</svg>
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+								<use xlink:href="#icon-reorder-24x24" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+							<svg class="">
+								<use xlink:href="#icon-rankingundefined-16x16" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sv-ranking-item__text">
+							<span class="sv-string-viewer">item3</span>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/rating-as-dropdown-description-with-text.snap.html b/tests/markup/snapshots/rating-as-dropdown-description-with-text.snap.html
index 79cae7d3b3..3a45e11504 100644
--- a/tests/markup/snapshots/rating-as-dropdown-description-with-text.snap.html
+++ b/tests/markup/snapshots/rating-as-dropdown-description-with-text.snap.html
@@ -1,71 +1,75 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<input autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" tabindex="-1" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<input autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" tabindex="-1" type="text">
+						</div>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<div class="sd-rating-dropdown-item">
-													<span class="sd-rating-dropdown-item_text">One</span>
-													<div class="sd-rating-dropdown-item_description">
-														<span class="sv-string-viewer">mimimi</span>
-													</div>
-												</div>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<div class="sd-rating-dropdown-item">
-													<span class="sd-rating-dropdown-item_text">Two</span>
-												</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<div class="sd-rating-dropdown-item">
-													<span class="sd-rating-dropdown-item_text">Three</span>
-												</div>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<div class="sd-rating-dropdown-item">
-													<span class="sd-rating-dropdown-item_text">Four</span>
-													<div class="sd-rating-dropdown-item_description">
-														<span class="sv-string-viewer">mamama</span>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<div class="sd-rating-dropdown-item">
+															<span class="sd-rating-dropdown-item_text">One</span>
+															<div class="sd-rating-dropdown-item_description">
+																<span class="sv-string-viewer">mimimi</span>
+															</div>
+														</div>
 													</div>
-												</div>
-											</div>
-										</li>
-									</ul>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<div class="sd-rating-dropdown-item">
+															<span class="sd-rating-dropdown-item_text">Two</span>
+														</div>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<div class="sd-rating-dropdown-item">
+															<span class="sd-rating-dropdown-item_text">Three</span>
+														</div>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<div class="sd-rating-dropdown-item">
+															<span class="sd-rating-dropdown-item_text">Four</span>
+															<div class="sd-rating-dropdown-item_description">
+																<span class="sv-string-viewer">mamama</span>
+															</div>
+														</div>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/rating-as-dropdown-description.snap.html b/tests/markup/snapshots/rating-as-dropdown-description.snap.html
index a926a2fc3b..1e84daacfc 100644
--- a/tests/markup/snapshots/rating-as-dropdown-description.snap.html
+++ b/tests/markup/snapshots/rating-as-dropdown-description.snap.html
@@ -1,71 +1,75 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<input autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" tabindex="-1" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<input autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" tabindex="-1" type="text">
+						</div>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<div class="sd-rating-dropdown-item">
-													<span class="sd-rating-dropdown-item_text">1</span>
-													<div class="sd-rating-dropdown-item_description">
-														<span class="sv-string-viewer">mimimi</span>
-													</div>
-												</div>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<div class="sd-rating-dropdown-item">
-													<span class="sd-rating-dropdown-item_text">2</span>
-												</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<div class="sd-rating-dropdown-item">
-													<span class="sd-rating-dropdown-item_text">3</span>
-												</div>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<div class="sd-rating-dropdown-item">
-													<span class="sd-rating-dropdown-item_text">4</span>
-													<div class="sd-rating-dropdown-item_description">
-														<span class="sv-string-viewer">mamama</span>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<div class="sd-rating-dropdown-item">
+															<span class="sd-rating-dropdown-item_text">1</span>
+															<div class="sd-rating-dropdown-item_description">
+																<span class="sv-string-viewer">mimimi</span>
+															</div>
+														</div>
 													</div>
-												</div>
-											</div>
-										</li>
-									</ul>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<div class="sd-rating-dropdown-item">
+															<span class="sd-rating-dropdown-item_text">2</span>
+														</div>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<div class="sd-rating-dropdown-item">
+															<span class="sd-rating-dropdown-item_text">3</span>
+														</div>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<div class="sd-rating-dropdown-item">
+															<span class="sd-rating-dropdown-item_text">4</span>
+															<div class="sd-rating-dropdown-item_description">
+																<span class="sv-string-viewer">mamama</span>
+															</div>
+														</div>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/rating-as-dropdown-disabled-with-value.snap.html b/tests/markup/snapshots/rating-as-dropdown-disabled-with-value.snap.html
index fd1ea19394..49821f0ae8 100644
--- a/tests/markup/snapshots/rating-as-dropdown-disabled-with-value.snap.html
+++ b/tests/markup/snapshots/rating-as-dropdown-disabled-with-value.snap.html
@@ -1,32 +1,36 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-formbox" disabled="" id="testid0i" role="combobox">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<span class="sv-string-editor" contenteditable="true">3</span>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size">
-				<div class="sd-action-bar__item sd-editor-clean-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Clear" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-cancel-24x24" class="">
-								</use>
-								<title class="">Clear</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-formbox" disabled="" id="testid0i" role="combobox">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<span class="sv-string-editor" contenteditable="true">3</span>
+						</div>
 					</div>
-				</div>
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size">
+						<div class="sd-action-bar__item sd-editor-clean-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Clear" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-cancel-24x24" class="">
+										</use>
+										<title class="">Clear</title>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/rating-as-dropdown-readonly-with-value.snap.html b/tests/markup/snapshots/rating-as-dropdown-readonly-with-value.snap.html
index 08d0f3b2ec..bd54bf02be 100644
--- a/tests/markup/snapshots/rating-as-dropdown-readonly-with-value.snap.html
+++ b/tests/markup/snapshots/rating-as-dropdown-readonly-with-value.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-formbox sd-formbox--readonly" id="testid0i" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<span class="sv-string-viewer">3</span>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-formbox sd-formbox--readonly" id="testid0i" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<span class="sv-string-viewer">3</span>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/rating-as-dropdown-readonly.snap.html b/tests/markup/snapshots/rating-as-dropdown-readonly.snap.html
index 524860f17a..65547619f3 100644
--- a/tests/markup/snapshots/rating-as-dropdown-readonly.snap.html
+++ b/tests/markup/snapshots/rating-as-dropdown-readonly.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--readonly" id="testid0i" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<span class="sv-string-viewer">Select...</span>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--readonly" id="testid0i" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<span class="sv-string-viewer">Select...</span>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/rating-as-dropdown-with-value-focused.snap.html b/tests/markup/snapshots/rating-as-dropdown-with-value-focused.snap.html
index eecb67467b..58676495c9 100644
--- a/tests/markup/snapshots/rating-as-dropdown-with-value-focused.snap.html
+++ b/tests/markup/snapshots/rating-as-dropdown-with-value-focused.snap.html
@@ -1,46 +1,50 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-formbox" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<span class="sv-string-viewer">3</span>
-					<input autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="" readonly="" tabindex="-1" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size">
-				<div class="sd-action-bar__item sd-editor-clean-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-cancel-24x24" class="">
-								</use>
-								<title class="">Clear</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-formbox" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<span class="sv-string-viewer">3</span>
+							<input autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="" readonly="" tabindex="-1" type="text">
+						</div>
 					</div>
-				</div>
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size">
+						<div class="sd-action-bar__item sd-editor-clean-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-cancel-24x24" class="">
+										</use>
+										<title class="">Clear</title>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/rating-as-dropdown.snap.html b/tests/markup/snapshots/rating-as-dropdown.snap.html
index 8306d46084..b9575871a2 100644
--- a/tests/markup/snapshots/rating-as-dropdown.snap.html
+++ b/tests/markup/snapshots/rating-as-dropdown.snap.html
@@ -1,34 +1,38 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0i" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<input autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_undefined" inputmode="text" placeholder="Select..." readonly="" tabindex="-1" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0i" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<input autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_undefined" inputmode="text" placeholder="Select..." readonly="" tabindex="-1" type="text">
+						</div>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/rating-as-wrappable.snap.html b/tests/markup/snapshots/rating-as-wrappable.snap.html
index 6183d6d90f..baefdcc82e 100644
--- a/tests/markup/snapshots/rating-as-wrappable.snap.html
+++ b/tests/markup/snapshots/rating-as-wrappable.snap.html
@@ -1,30 +1,34 @@
-<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<span class="sd-rating__item-text" data-text="1">
-				<span class="sv-string-viewer">1</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<span class="sd-rating__item-text" data-text="2">
-				<span class="sv-string-viewer">2</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="3">
-			<span class="sd-rating__item-text" data-text="3">
-				<span class="sv-string-viewer">3</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="4">
-			<span class="sd-rating__item-text" data-text="4">
-				<span class="sv-string-viewer">4</span>
-			</span>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<span class="sd-rating__item-text" data-text="1">
+						<span class="sv-string-viewer">1</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<span class="sd-rating__item-text" data-text="2">
+						<span class="sv-string-viewer">2</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="3">
+					<span class="sd-rating__item-text" data-text="3">
+						<span class="sv-string-viewer">3</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="4">
+					<span class="sd-rating__item-text" data-text="4">
+						<span class="sv-string-viewer">4</span>
+					</span>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-display-mode.snap.html b/tests/markup/snapshots/rating-display-mode.snap.html
index 711f1d636f..22768855bc 100644
--- a/tests/markup/snapshots/rating-display-mode.snap.html
+++ b/tests/markup/snapshots/rating-display-mode.snap.html
@@ -1,30 +1,34 @@
-<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="1">
-			<span class="sd-rating__item-text" data-text="1">
-				<span class="sv-string-viewer">1</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="2">
-			<span class="sd-rating__item-text" data-text="2">
-				<span class="sv-string-viewer">2</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
-			<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" readonly="" type="radio" value="3">
-			<span class="sd-rating__item-text" data-text="3">
-				<span class="sv-string-viewer">3</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
-			<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" readonly="" type="radio" value="4">
-			<span class="sd-rating__item-text" data-text="4">
-				<span class="sv-string-viewer">4</span>
-			</span>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="1">
+					<span class="sd-rating__item-text" data-text="1">
+						<span class="sv-string-viewer">1</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="2">
+					<span class="sd-rating__item-text" data-text="2">
+						<span class="sv-string-viewer">2</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
+					<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" readonly="" type="radio" value="3">
+					<span class="sd-rating__item-text" data-text="3">
+						<span class="sv-string-viewer">3</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
+					<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" readonly="" type="radio" value="4">
+					<span class="sd-rating__item-text" data-text="4">
+						<span class="sv-string-viewer">4</span>
+					</span>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-min-max-items.snap.html b/tests/markup/snapshots/rating-min-max-items.snap.html
index 574661bfb9..fbec59aef8 100644
--- a/tests/markup/snapshots/rating-min-max-items.snap.html
+++ b/tests/markup/snapshots/rating-min-max-items.snap.html
@@ -1,30 +1,34 @@
-<div class="sd-rating sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item sd-rating__item--allowhover">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<span class="sd-rating__item-text" data-text="1">
-				<span class="sv-string-viewer">min</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<span class="sd-rating__item-text" data-text="2">
-				<span class="sv-string-viewer">2</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="3">
-			<span class="sd-rating__item-text" data-text="3">
-				<span class="sv-string-viewer">3</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover">
-			<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="4">
-			<span class="sd-rating__item-text" data-text="4">
-				<span class="sv-string-viewer">max</span>
-			</span>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item sd-rating__item--allowhover">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<span class="sd-rating__item-text" data-text="1">
+						<span class="sv-string-viewer">min</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<span class="sd-rating__item-text" data-text="2">
+						<span class="sv-string-viewer">2</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="3">
+					<span class="sd-rating__item-text" data-text="3">
+						<span class="sv-string-viewer">3</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover">
+					<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="4">
+					<span class="sd-rating__item-text" data-text="4">
+						<span class="sv-string-viewer">max</span>
+					</span>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-min-max.snap.html b/tests/markup/snapshots/rating-min-max.snap.html
index 36c7992d7d..994e053c79 100644
--- a/tests/markup/snapshots/rating-min-max.snap.html
+++ b/tests/markup/snapshots/rating-min-max.snap.html
@@ -1,36 +1,40 @@
-<div class="sd-rating sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<span class="sd-rating__item-text sd-rating__min-text">
-			<span class="sv-string-viewer">min</span>
-		</span>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<span class="sd-rating__item-text" data-text="1">
-				<span class="sv-string-viewer">1</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<span class="sd-rating__item-text" data-text="2">
-				<span class="sv-string-viewer">2</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="3">
-			<span class="sd-rating__item-text" data-text="3">
-				<span class="sv-string-viewer">3</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="4">
-			<span class="sd-rating__item-text" data-text="4">
-				<span class="sv-string-viewer">4</span>
-			</span>
-		</label>
-		<span class="sd-rating__item-text sd-rating__max-text">
-			<span class="sv-string-viewer">max</span>
-		</span>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<span class="sd-rating__item-text sd-rating__min-text">
+					<span class="sv-string-viewer">min</span>
+				</span>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<span class="sd-rating__item-text" data-text="1">
+						<span class="sv-string-viewer">1</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<span class="sd-rating__item-text" data-text="2">
+						<span class="sv-string-viewer">2</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="3">
+					<span class="sd-rating__item-text" data-text="3">
+						<span class="sv-string-viewer">3</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="4">
+					<span class="sd-rating__item-text" data-text="4">
+						<span class="sv-string-viewer">4</span>
+					</span>
+				</label>
+				<span class="sd-rating__item-text sd-rating__max-text">
+					<span class="sv-string-viewer">max</span>
+				</span>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-simple-disabled.snap.html b/tests/markup/snapshots/rating-simple-disabled.snap.html
index b7207c3acd..369c94cabf 100644
--- a/tests/markup/snapshots/rating-simple-disabled.snap.html
+++ b/tests/markup/snapshots/rating-simple-disabled.snap.html
@@ -1,30 +1,34 @@
-<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" disabled="" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<span class="sd-rating__item-text" data-text="1">
-				<span class="sv-string-editor" contenteditable="true">1</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" disabled="" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<span class="sd-rating__item-text" data-text="2">
-				<span class="sv-string-editor" contenteditable="true">2</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" disabled="" id="testid0i_2" name="name_testid0" type="radio" value="3">
-			<span class="sd-rating__item-text" data-text="3">
-				<span class="sv-string-editor" contenteditable="true">3</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" disabled="" id="testid0i_3" name="name_testid0" type="radio" value="4">
-			<span class="sd-rating__item-text" data-text="4">
-				<span class="sv-string-editor" contenteditable="true">4</span>
-			</span>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" disabled="" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<span class="sd-rating__item-text" data-text="1">
+						<span class="sv-string-editor" contenteditable="true">1</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" disabled="" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<span class="sd-rating__item-text" data-text="2">
+						<span class="sv-string-editor" contenteditable="true">2</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" disabled="" id="testid0i_2" name="name_testid0" type="radio" value="3">
+					<span class="sd-rating__item-text" data-text="3">
+						<span class="sv-string-editor" contenteditable="true">3</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" disabled="" id="testid0i_3" name="name_testid0" type="radio" value="4">
+					<span class="sd-rating__item-text" data-text="4">
+						<span class="sv-string-editor" contenteditable="true">4</span>
+					</span>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-simple-readonly.snap.html b/tests/markup/snapshots/rating-simple-readonly.snap.html
index 31b04e40e9..93721c4207 100644
--- a/tests/markup/snapshots/rating-simple-readonly.snap.html
+++ b/tests/markup/snapshots/rating-simple-readonly.snap.html
@@ -1,30 +1,34 @@
-<div class="sd-rating sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="1">
-			<span class="sd-rating__item-text" data-text="1">
-				<span class="sv-string-viewer">1</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="2">
-			<span class="sd-rating__item-text" data-text="2">
-				<span class="sv-string-viewer">2</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
-			<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" readonly="" type="radio" value="3">
-			<span class="sd-rating__item-text" data-text="3">
-				<span class="sv-string-viewer">3</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
-			<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" readonly="" type="radio" value="4">
-			<span class="sd-rating__item-text" data-text="4">
-				<span class="sv-string-viewer">4</span>
-			</span>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="1">
+					<span class="sd-rating__item-text" data-text="1">
+						<span class="sv-string-viewer">1</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="2">
+					<span class="sd-rating__item-text" data-text="2">
+						<span class="sv-string-viewer">2</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
+					<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" readonly="" type="radio" value="3">
+					<span class="sd-rating__item-text" data-text="3">
+						<span class="sv-string-viewer">3</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
+					<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" readonly="" type="radio" value="4">
+					<span class="sd-rating__item-text" data-text="4">
+						<span class="sv-string-viewer">4</span>
+					</span>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-simple.snap.html b/tests/markup/snapshots/rating-simple.snap.html
index 2693ac1343..0203e54179 100644
--- a/tests/markup/snapshots/rating-simple.snap.html
+++ b/tests/markup/snapshots/rating-simple.snap.html
@@ -1,30 +1,34 @@
-<div class="sd-rating sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<span class="sd-rating__item-text" data-text="1">
-				<span class="sv-string-viewer">1</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<span class="sd-rating__item-text" data-text="2">
-				<span class="sv-string-viewer">2</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="3">
-			<span class="sd-rating__item-text" data-text="3">
-				<span class="sv-string-viewer">3</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="4">
-			<span class="sd-rating__item-text" data-text="4">
-				<span class="sv-string-viewer">4</span>
-			</span>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<span class="sd-rating__item-text" data-text="1">
+						<span class="sv-string-viewer">1</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<span class="sd-rating__item-text" data-text="2">
+						<span class="sv-string-viewer">2</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="3">
+					<span class="sd-rating__item-text" data-text="3">
+						<span class="sv-string-viewer">3</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="4">
+					<span class="sd-rating__item-text" data-text="4">
+						<span class="sv-string-viewer">4</span>
+					</span>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-smileys-disabled.snap.html b/tests/markup/snapshots/rating-smileys-disabled.snap.html
index 46d57bc8a7..c9449b895f 100644
--- a/tests/markup/snapshots/rating-smileys-disabled.snap.html
+++ b/tests/markup/snapshots/rating-smileys-disabled.snap.html
@@ -1,20 +1,24 @@
-<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item-smiley" title="1">
-			<input class="sv-visuallyhidden" disabled="" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<svg class="sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-smiley-rate4-24x24">
-				</use>
-			</svg>
-		</label>
-		<label class="sd-rating__item-smiley" title="2">
-			<input class="sv-visuallyhidden" disabled="" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<svg class="sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-smiley-rate8-24x24">
-				</use>
-			</svg>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item-smiley" title="1">
+					<input class="sv-visuallyhidden" disabled="" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<svg class="sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-smiley-rate4-24x24" class="">
+						</use>
+					</svg>
+				</label>
+				<label class="sd-rating__item-smiley" title="2">
+					<input class="sv-visuallyhidden" disabled="" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<svg class="sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-smiley-rate8-24x24" class="">
+						</use>
+					</svg>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-smileys-readonly.snap.html b/tests/markup/snapshots/rating-smileys-readonly.snap.html
index 4af3692e2c..6e45eaac05 100644
--- a/tests/markup/snapshots/rating-smileys-readonly.snap.html
+++ b/tests/markup/snapshots/rating-smileys-readonly.snap.html
@@ -1,20 +1,24 @@
-<div class="sd-rating sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item-smiley sd-rating__item-smiley--readonly" title="1">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="1">
-			<svg class="sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-smiley-rate4-24x24" class="">
-				</use>
-			</svg>
-		</label>
-		<label class="sd-rating__item-smiley sd-rating__item-smiley--readonly" title="2">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="2">
-			<svg class="sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-smiley-rate8-24x24" class="">
-				</use>
-			</svg>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item-smiley sd-rating__item-smiley--readonly" title="1">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="1">
+					<svg class="sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-smiley-rate4-24x24" class="">
+						</use>
+					</svg>
+				</label>
+				<label class="sd-rating__item-smiley sd-rating__item-smiley--readonly" title="2">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="2">
+					<svg class="sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-smiley-rate8-24x24" class="">
+						</use>
+					</svg>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-smileys.snap.html b/tests/markup/snapshots/rating-smileys.snap.html
index f3297f31b4..7b219b7e34 100644
--- a/tests/markup/snapshots/rating-smileys.snap.html
+++ b/tests/markup/snapshots/rating-smileys.snap.html
@@ -1,20 +1,24 @@
-<div class="sd-rating sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item-smiley sd-rating__item-smiley--allowhover" title="1">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<svg class="sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-smiley-rate4-24x24" class="">
-				</use>
-			</svg>
-		</label>
-		<label class="sd-rating__item-smiley sd-rating__item-smiley--allowhover" title="2">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<svg class="sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-smiley-rate8-24x24" class="">
-				</use>
-			</svg>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item-smiley sd-rating__item-smiley--allowhover" title="1">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<svg class="sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-smiley-rate4-24x24" class="">
+						</use>
+					</svg>
+				</label>
+				<label class="sd-rating__item-smiley sd-rating__item-smiley--allowhover" title="2">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<svg class="sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-smiley-rate8-24x24" class="">
+						</use>
+					</svg>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-stars-disabled.snap.html b/tests/markup/snapshots/rating-stars-disabled.snap.html
index 9ea65e378f..ae4a41bf92 100644
--- a/tests/markup/snapshots/rating-stars-disabled.snap.html
+++ b/tests/markup/snapshots/rating-stars-disabled.snap.html
@@ -1,28 +1,32 @@
-<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item-star" title="1">
-			<input class="sv-visuallyhidden" disabled="" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<svg class="sv-star sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star" class="">
-				</use>
-			</svg>
-			<svg class="sv-star-2 sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star-2" class="">
-				</use>
-			</svg>
-		</label>
-		<label class="sd-rating__item-star" title="2">
-			<input class="sv-visuallyhidden" disabled="" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<svg class="sv-star sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star" class="">
-				</use>
-			</svg>
-			<svg class="sv-star-2 sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star-2" class="">
-				</use>
-			</svg>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item-star" title="1">
+					<input class="sv-visuallyhidden" disabled="" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<svg class="sv-star sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star" class="">
+						</use>
+					</svg>
+					<svg class="sv-star-2 sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star-2" class="">
+						</use>
+					</svg>
+				</label>
+				<label class="sd-rating__item-star" title="2">
+					<input class="sv-visuallyhidden" disabled="" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<svg class="sv-star sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star" class="">
+						</use>
+					</svg>
+					<svg class="sv-star-2 sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star-2" class="">
+						</use>
+					</svg>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-stars-readonly.snap.html b/tests/markup/snapshots/rating-stars-readonly.snap.html
index a12aea28a7..d493227dff 100644
--- a/tests/markup/snapshots/rating-stars-readonly.snap.html
+++ b/tests/markup/snapshots/rating-stars-readonly.snap.html
@@ -1,28 +1,32 @@
-<div class="sd-rating sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item-star sd-rating__item-star--allowhover" title="1">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<svg class="sv-star sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star" class="">
-				</use>
-			</svg>
-			<svg class="sv-star-2 sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star-2" class="">
-				</use>
-			</svg>
-		</label>
-		<label class="sd-rating__item-star sd-rating__item-star--allowhover" title="2">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<svg class="sv-star sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star" class="">
-				</use>
-			</svg>
-			<svg class="sv-star-2 sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star-2" class="">
-				</use>
-			</svg>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item-star sd-rating__item-star--allowhover" title="1">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<svg class="sv-star sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star" class="">
+						</use>
+					</svg>
+					<svg class="sv-star-2 sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star-2" class="">
+						</use>
+					</svg>
+				</label>
+				<label class="sd-rating__item-star sd-rating__item-star--allowhover" title="2">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<svg class="sv-star sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star" class="">
+						</use>
+					</svg>
+					<svg class="sv-star-2 sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star-2" class="">
+						</use>
+					</svg>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-stars.snap.html b/tests/markup/snapshots/rating-stars.snap.html
index a12aea28a7..d493227dff 100644
--- a/tests/markup/snapshots/rating-stars.snap.html
+++ b/tests/markup/snapshots/rating-stars.snap.html
@@ -1,28 +1,32 @@
-<div class="sd-rating sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item-star sd-rating__item-star--allowhover" title="1">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<svg class="sv-star sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star" class="">
-				</use>
-			</svg>
-			<svg class="sv-star-2 sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star-2" class="">
-				</use>
-			</svg>
-		</label>
-		<label class="sd-rating__item-star sd-rating__item-star--allowhover" title="2">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<svg class="sv-star sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star" class="">
-				</use>
-			</svg>
-			<svg class="sv-star-2 sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star-2" class="">
-				</use>
-			</svg>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item-star sd-rating__item-star--allowhover" title="1">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<svg class="sv-star sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star" class="">
+						</use>
+					</svg>
+					<svg class="sv-star-2 sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star-2" class="">
+						</use>
+					</svg>
+				</label>
+				<label class="sd-rating__item-star sd-rating__item-star--allowhover" title="2">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<svg class="sv-star sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star" class="">
+						</use>
+					</svg>
+					<svg class="sv-star-2 sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star-2" class="">
+						</use>
+					</svg>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/signaturepad-loading.snap.html b/tests/markup/snapshots/signaturepad-loading.snap.html
index 6ba304c9eb..b1d859c506 100644
--- a/tests/markup/snapshots/signaturepad-loading.snap.html
+++ b/tests/markup/snapshots/signaturepad-loading.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
-	<div class="sjs_sp_placeholder" style="display:none;">
-		<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
-	</div>
-	<div>
-		<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
-		</canvas>
-	</div>
-	<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
-	</div>
-	<div class="sd-signaturepad__loading-indicator">
-		<div class="sd-loading-indicator">
-			<svg class="sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-loading-48x48" class="">
-				</use>
-			</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
+			<div class="sjs_sp_placeholder" style="display:none;">
+				<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
+			</div>
+			<div>
+				<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
+				</canvas>
+			</div>
+			<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
+			</div>
+			<div class="sd-signaturepad__loading-indicator">
+				<div class="sd-loading-indicator">
+					<svg class="sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-loading-48x48" class="">
+						</use>
+					</svg>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/signaturepad-readonly.snap.html b/tests/markup/snapshots/signaturepad-readonly.snap.html
index 65d80881e9..ef75ad2309 100644
--- a/tests/markup/snapshots/signaturepad-readonly.snap.html
+++ b/tests/markup/snapshots/signaturepad-readonly.snap.html
@@ -1,11 +1,15 @@
-<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
-	<div class="sjs_sp_placeholder">
-		<span class="sv-string-viewer sv-string-viewer--multiline">No signature</span>
-	</div>
-	<div>
-		<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:auto; width:300px;" tabindex="-1" width="300">
-		</canvas>
-	</div>
-	<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
+			<div class="sjs_sp_placeholder">
+				<span class="sv-string-viewer sv-string-viewer--multiline">No signature</span>
+			</div>
+			<div>
+				<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:auto; width:300px;" tabindex="-1" width="300">
+				</canvas>
+			</div>
+			<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/signaturepad-scaled.snap.html b/tests/markup/snapshots/signaturepad-scaled.snap.html
index c410a1a948..8605a617ab 100644
--- a/tests/markup/snapshots/signaturepad-scaled.snap.html
+++ b/tests/markup/snapshots/signaturepad-scaled.snap.html
@@ -1,12 +1,16 @@
-<div class="sd-signaturepad sjs_sp_container" style="width:100%;">
-	<div class="sjs_sp_placeholder">
-		<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
-	</div>
-	<div>
-		<img class="sd-signaturepad__background-image sjs_sp__background-image" role="presentation" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="width:100%;">
-			<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:100%;" tabindex="-1" width="300">
-			</canvas>
-		</div>
-		<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-signaturepad sjs_sp_container" style="width:100%;">
+			<div class="sjs_sp_placeholder">
+				<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
+			</div>
+			<div>
+				<img class="sd-signaturepad__background-image sjs_sp__background-image" role="presentation" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="width:100%;">
+					<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:100%;" tabindex="-1" width="300">
+					</canvas>
+				</div>
+				<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
+				</div>
+			</div>
 		</div>
 	</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/signaturepad-value.snap.html b/tests/markup/snapshots/signaturepad-value.snap.html
index 5df9a40f8a..f7c467b74d 100644
--- a/tests/markup/snapshots/signaturepad-value.snap.html
+++ b/tests/markup/snapshots/signaturepad-value.snap.html
@@ -1,21 +1,25 @@
-<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
-	<div class="sjs_sp_placeholder" style="display:none;">
-		<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
-	</div>
-	<div>
-		<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
-		</canvas>
-	</div>
-	<div class="sd-action-bar sd-action-bar--default-size sd-signaturepad__controls sjs_sp_controls">
-		<div class="sd-action-bar__item">
-			<div class="sd-action-bar__item-content">
-				<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small sd-signaturepad__clear sjs_sp_clear" role="button" tabindex="0" title="Clear" type="button">
-					<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
-						<use xlink:href="#icon-clear-24x24" class="">
-						</use>
-						<title class="">Clear</title>
-					</svg>
-				</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
+			<div class="sjs_sp_placeholder" style="display:none;">
+				<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
+			</div>
+			<div>
+				<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
+				</canvas>
+			</div>
+			<div class="sd-action-bar sd-action-bar--default-size sd-signaturepad__controls sjs_sp_controls">
+				<div class="sd-action-bar__item">
+					<div class="sd-action-bar__item-content">
+						<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small sd-signaturepad__clear sjs_sp_clear" role="button" tabindex="0" title="Clear" type="button">
+							<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
+								<use xlink:href="#icon-clear-24x24" class="">
+								</use>
+								<title class="">Clear</title>
+							</svg>
+						</button>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/signaturepad-with-backgroundImage.snap.html b/tests/markup/snapshots/signaturepad-with-backgroundImage.snap.html
index 083f93501f..c8a86fc7c8 100644
--- a/tests/markup/snapshots/signaturepad-with-backgroundImage.snap.html
+++ b/tests/markup/snapshots/signaturepad-with-backgroundImage.snap.html
@@ -1,12 +1,16 @@
-<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
-	<div class="sjs_sp_placeholder">
-		<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
-	</div>
-	<div>
-		<img class="sd-signaturepad__background-image sjs_sp__background-image" role="presentation" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="width:300px;">
-			<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
-			</canvas>
-		</div>
-		<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
+			<div class="sjs_sp_placeholder">
+				<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
+			</div>
+			<div>
+				<img class="sd-signaturepad__background-image sjs_sp__background-image" role="presentation" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="width:300px;">
+					<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
+					</canvas>
+				</div>
+				<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
+				</div>
+			</div>
 		</div>
 	</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/signaturepad.snap.html b/tests/markup/snapshots/signaturepad.snap.html
index bcb709b720..086a53c86b 100644
--- a/tests/markup/snapshots/signaturepad.snap.html
+++ b/tests/markup/snapshots/signaturepad.snap.html
@@ -1,11 +1,15 @@
-<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
-	<div class="sjs_sp_placeholder">
-		<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
-	</div>
-	<div>
-		<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
-		</canvas>
-	</div>
-	<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
+			<div class="sjs_sp_placeholder">
+				<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
+			</div>
+			<div>
+				<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
+				</canvas>
+			</div>
+			<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/slider-custom-labels.snap.html b/tests/markup/snapshots/slider-custom-labels.snap.html
index fb9a70cb2f..bc23a7ef37 100644
--- a/tests/markup/snapshots/slider-custom-labels.snap.html
+++ b/tests/markup/snapshots/slider-custom-labels.snap.html
@@ -1,81 +1,85 @@
-<div class="sd-slider sd-slider--labels-show-value-text-mode sd-slider--single">
-	<div class="sd-slider-container">
-		<div class="sd-slider-container__slider">
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
-			</div>
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:100%;">
-			</div>
-			<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:100%;">
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container sd-slider__thumb-container--indeterminate" style="left:0%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">0</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-slider sd-slider--labels-show-value-text-mode sd-slider--single">
+			<div class="sd-slider-container">
+				<div class="sd-slider-container__slider">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:100%;">
 					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="sd-slider-labels-container">
-		<div>
-			<div class="sd-slider__label" style="left:0%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="0">0</div>
-					<div class="sd-slider__label-text sd-slider__label-text--secondary" title="Lowest">
-						<span class="sv-string-viewer">Lowest</span>
+					<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:100%;">
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:20%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="20">
-						<span class="sv-string-viewer">20</span>
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container sd-slider__thumb-container--indeterminate" style="left:0%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">0</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-			<div class="sd-slider__label" style="left:40%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="40">
-						<span class="sv-string-viewer">40</span>
+			<div class="sd-slider-labels-container">
+				<div>
+					<div class="sd-slider__label" style="left:0%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="0">0</div>
+							<div class="sd-slider__label-text sd-slider__label-text--secondary" title="Lowest">
+								<span class="sv-string-viewer">Lowest</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:60%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="Middle">
-						<span class="sv-string-viewer">Middle</span>
+					<div class="sd-slider__label" style="left:20%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="20">
+								<span class="sv-string-viewer">20</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:80%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="80">
-						<span class="sv-string-viewer">80</span>
+					<div class="sd-slider__label" style="left:40%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="40">
+								<span class="sv-string-viewer">40</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:100%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="100">100</div>
-					<div class="sd-slider__label-text sd-slider__label-text--secondary" title=" Highest">
-						<span class="sv-string-viewer"> Highest</span>
+					<div class="sd-slider__label" style="left:60%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="Middle">
+								<span class="sv-string-viewer">Middle</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:80%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="80">
+								<span class="sv-string-viewer">80</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:100%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="100">100</div>
+							<div class="sd-slider__label-text sd-slider__label-text--secondary" title=" Highest">
+								<span class="sv-string-viewer"> Highest</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/slider-default-value-range-mode.snap.html b/tests/markup/snapshots/slider-default-value-range-mode.snap.html
index efced7bf8f..005b4f9055 100644
--- a/tests/markup/snapshots/slider-default-value-range-mode.snap.html
+++ b/tests/markup/snapshots/slider-default-value-range-mode.snap.html
@@ -1,92 +1,96 @@
-<div class="sd-slider">
-	<input aria-hidden="true" class="sd-slider__input" id="testid0-sjs-slider-input-range-input" max="100" min="0" name="range-input" step="1" style="--sjs-range-slider-range-input-thumb-left:calc(30% + 20px); --sjs-range-slider-range-input-thumb-position:absolute; --sjs-range-slider-range-input-thumb-width:calc(30% - 20px - 20px);" tabindex="-1" type="range">
-	<div class="sd-slider-container">
-		<div class="sd-slider-container__slider">
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:30%;">
-			</div>
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:40%;">
-			</div>
-			<div class="sd-slider__range-track sd-slider__track" style="left:30%; right:40%;">
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container" style="left:30%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">30</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-slider">
+			<input aria-hidden="true" class="sd-slider__input" id="testid0-sjs-slider-input-range-input" max="100" min="0" name="range-input" step="1" style="--sjs-range-slider-range-input-thumb-left:calc(30% + 20px); --sjs-range-slider-range-input-thumb-position:absolute; --sjs-range-slider-range-input-thumb-width:calc(30% - 20px - 20px);" tabindex="-1" type="range">
+			<div class="sd-slider-container">
+				<div class="sd-slider-container__slider">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:30%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:40%;">
 					</div>
-				</div>
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-1" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container" style="left:60%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">60</div>
+					<div class="sd-slider__range-track sd-slider__track" style="left:30%; right:40%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container" style="left:30%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">30</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="sd-slider-labels-container">
-		<div>
-			<div class="sd-slider__label" style="left:0%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="0">
-						<span class="sv-string-viewer">0</span>
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-1" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container" style="left:60%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">60</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-			<div class="sd-slider__label" style="left:20%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="20">
-						<span class="sv-string-viewer">20</span>
+			<div class="sd-slider-labels-container">
+				<div>
+					<div class="sd-slider__label" style="left:0%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="0">
+								<span class="sv-string-viewer">0</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:40%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="40">
-						<span class="sv-string-viewer">40</span>
+					<div class="sd-slider__label" style="left:20%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="20">
+								<span class="sv-string-viewer">20</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:60%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="60">
-						<span class="sv-string-viewer">60</span>
+					<div class="sd-slider__label" style="left:40%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="40">
+								<span class="sv-string-viewer">40</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:80%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="80">
-						<span class="sv-string-viewer">80</span>
+					<div class="sd-slider__label" style="left:60%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="60">
+								<span class="sv-string-viewer">60</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:100%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="100">
-						<span class="sv-string-viewer">100</span>
+					<div class="sd-slider__label" style="left:80%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="80">
+								<span class="sv-string-viewer">80</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:100%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="100">
+								<span class="sv-string-viewer">100</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/slider-default-value-single-mode.snap.html b/tests/markup/snapshots/slider-default-value-single-mode.snap.html
index b6b45d96e8..5bbdb534d9 100644
--- a/tests/markup/snapshots/slider-default-value-single-mode.snap.html
+++ b/tests/markup/snapshots/slider-default-value-single-mode.snap.html
@@ -1,79 +1,83 @@
-<div class="sd-slider sd-slider--single">
-	<div class="sd-slider-container">
-		<div class="sd-slider-container__slider">
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
-			</div>
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:50%;">
-			</div>
-			<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:50%;">
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container" style="left:50%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">50</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-slider sd-slider--single">
+			<div class="sd-slider-container">
+				<div class="sd-slider-container__slider">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:50%;">
 					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="sd-slider-labels-container">
-		<div>
-			<div class="sd-slider__label" style="left:0%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="0">
-						<span class="sv-string-viewer">0</span>
+					<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:50%;">
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:20%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="20">
-						<span class="sv-string-viewer">20</span>
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container" style="left:50%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">50</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-			<div class="sd-slider__label" style="left:40%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="40">
-						<span class="sv-string-viewer">40</span>
+			<div class="sd-slider-labels-container">
+				<div>
+					<div class="sd-slider__label" style="left:0%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="0">
+								<span class="sv-string-viewer">0</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:60%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="60">
-						<span class="sv-string-viewer">60</span>
+					<div class="sd-slider__label" style="left:20%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="20">
+								<span class="sv-string-viewer">20</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:80%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="80">
-						<span class="sv-string-viewer">80</span>
+					<div class="sd-slider__label" style="left:40%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="40">
+								<span class="sv-string-viewer">40</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:100%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="100">
-						<span class="sv-string-viewer">100</span>
+					<div class="sd-slider__label" style="left:60%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="60">
+								<span class="sv-string-viewer">60</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:80%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="80">
+								<span class="sv-string-viewer">80</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:100%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="100">
+								<span class="sv-string-viewer">100</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/slider-range-mode.snap.html b/tests/markup/snapshots/slider-range-mode.snap.html
index 3a35cc173a..61f460e8ee 100644
--- a/tests/markup/snapshots/slider-range-mode.snap.html
+++ b/tests/markup/snapshots/slider-range-mode.snap.html
@@ -1,92 +1,96 @@
-<div class="sd-slider">
-	<input aria-hidden="true" class="sd-slider__input" id="testid0-sjs-slider-input-range-input" max="100" min="0" name="range-input" step="1" style="--sjs-range-slider-range-input-thumb-left:calc(0% + 20px); --sjs-range-slider-range-input-thumb-position:absolute; --sjs-range-slider-range-input-thumb-width:calc(100% - 20px - 20px);" tabindex="-1" type="range">
-	<div class="sd-slider-container">
-		<div class="sd-slider-container__slider">
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
-			</div>
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:0%;">
-			</div>
-			<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:0%;">
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container sd-slider__thumb-container--indeterminate" style="left:0%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">0</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-slider">
+			<input aria-hidden="true" class="sd-slider__input" id="testid0-sjs-slider-input-range-input" max="100" min="0" name="range-input" step="1" style="--sjs-range-slider-range-input-thumb-left:calc(0% + 20px); --sjs-range-slider-range-input-thumb-position:absolute; --sjs-range-slider-range-input-thumb-width:calc(100% - 20px - 20px);" tabindex="-1" type="range">
+			<div class="sd-slider-container">
+				<div class="sd-slider-container__slider">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:0%;">
 					</div>
-				</div>
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-1" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container sd-slider__thumb-container--indeterminate" style="left:100%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">100</div>
+					<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:0%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container sd-slider__thumb-container--indeterminate" style="left:0%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">0</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="sd-slider-labels-container">
-		<div>
-			<div class="sd-slider__label" style="left:0%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="0">
-						<span class="sv-string-viewer">0</span>
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-1" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container sd-slider__thumb-container--indeterminate" style="left:100%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">100</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-			<div class="sd-slider__label" style="left:20%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="20">
-						<span class="sv-string-viewer">20</span>
+			<div class="sd-slider-labels-container">
+				<div>
+					<div class="sd-slider__label" style="left:0%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="0">
+								<span class="sv-string-viewer">0</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:40%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="40">
-						<span class="sv-string-viewer">40</span>
+					<div class="sd-slider__label" style="left:20%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="20">
+								<span class="sv-string-viewer">20</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:60%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="60">
-						<span class="sv-string-viewer">60</span>
+					<div class="sd-slider__label" style="left:40%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="40">
+								<span class="sv-string-viewer">40</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:80%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="80">
-						<span class="sv-string-viewer">80</span>
+					<div class="sd-slider__label" style="left:60%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="60">
+								<span class="sv-string-viewer">60</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:100%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="100">
-						<span class="sv-string-viewer">100</span>
+					<div class="sd-slider__label" style="left:80%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="80">
+								<span class="sv-string-viewer">80</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:100%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="100">
+								<span class="sv-string-viewer">100</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/slider-read-only-range-mode.snap.html b/tests/markup/snapshots/slider-read-only-range-mode.snap.html
index efced7bf8f..005b4f9055 100644
--- a/tests/markup/snapshots/slider-read-only-range-mode.snap.html
+++ b/tests/markup/snapshots/slider-read-only-range-mode.snap.html
@@ -1,92 +1,96 @@
-<div class="sd-slider">
-	<input aria-hidden="true" class="sd-slider__input" id="testid0-sjs-slider-input-range-input" max="100" min="0" name="range-input" step="1" style="--sjs-range-slider-range-input-thumb-left:calc(30% + 20px); --sjs-range-slider-range-input-thumb-position:absolute; --sjs-range-slider-range-input-thumb-width:calc(30% - 20px - 20px);" tabindex="-1" type="range">
-	<div class="sd-slider-container">
-		<div class="sd-slider-container__slider">
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:30%;">
-			</div>
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:40%;">
-			</div>
-			<div class="sd-slider__range-track sd-slider__track" style="left:30%; right:40%;">
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container" style="left:30%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">30</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-slider">
+			<input aria-hidden="true" class="sd-slider__input" id="testid0-sjs-slider-input-range-input" max="100" min="0" name="range-input" step="1" style="--sjs-range-slider-range-input-thumb-left:calc(30% + 20px); --sjs-range-slider-range-input-thumb-position:absolute; --sjs-range-slider-range-input-thumb-width:calc(30% - 20px - 20px);" tabindex="-1" type="range">
+			<div class="sd-slider-container">
+				<div class="sd-slider-container__slider">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:30%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:40%;">
 					</div>
-				</div>
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-1" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container" style="left:60%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">60</div>
+					<div class="sd-slider__range-track sd-slider__track" style="left:30%; right:40%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container" style="left:30%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">30</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="sd-slider-labels-container">
-		<div>
-			<div class="sd-slider__label" style="left:0%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="0">
-						<span class="sv-string-viewer">0</span>
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-1" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container" style="left:60%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">60</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-			<div class="sd-slider__label" style="left:20%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="20">
-						<span class="sv-string-viewer">20</span>
+			<div class="sd-slider-labels-container">
+				<div>
+					<div class="sd-slider__label" style="left:0%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="0">
+								<span class="sv-string-viewer">0</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:40%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="40">
-						<span class="sv-string-viewer">40</span>
+					<div class="sd-slider__label" style="left:20%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="20">
+								<span class="sv-string-viewer">20</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:60%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="60">
-						<span class="sv-string-viewer">60</span>
+					<div class="sd-slider__label" style="left:40%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="40">
+								<span class="sv-string-viewer">40</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:80%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="80">
-						<span class="sv-string-viewer">80</span>
+					<div class="sd-slider__label" style="left:60%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="60">
+								<span class="sv-string-viewer">60</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:100%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="100">
-						<span class="sv-string-viewer">100</span>
+					<div class="sd-slider__label" style="left:80%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="80">
+								<span class="sv-string-viewer">80</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:100%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="100">
+								<span class="sv-string-viewer">100</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/slider-read-only-single-mode.snap.html b/tests/markup/snapshots/slider-read-only-single-mode.snap.html
index b6b45d96e8..5bbdb534d9 100644
--- a/tests/markup/snapshots/slider-read-only-single-mode.snap.html
+++ b/tests/markup/snapshots/slider-read-only-single-mode.snap.html
@@ -1,79 +1,83 @@
-<div class="sd-slider sd-slider--single">
-	<div class="sd-slider-container">
-		<div class="sd-slider-container__slider">
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
-			</div>
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:50%;">
-			</div>
-			<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:50%;">
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container" style="left:50%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">50</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-slider sd-slider--single">
+			<div class="sd-slider-container">
+				<div class="sd-slider-container__slider">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:50%;">
 					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="sd-slider-labels-container">
-		<div>
-			<div class="sd-slider__label" style="left:0%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="0">
-						<span class="sv-string-viewer">0</span>
+					<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:50%;">
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:20%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="20">
-						<span class="sv-string-viewer">20</span>
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container" style="left:50%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">50</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-			<div class="sd-slider__label" style="left:40%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="40">
-						<span class="sv-string-viewer">40</span>
+			<div class="sd-slider-labels-container">
+				<div>
+					<div class="sd-slider__label" style="left:0%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="0">
+								<span class="sv-string-viewer">0</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:60%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="60">
-						<span class="sv-string-viewer">60</span>
+					<div class="sd-slider__label" style="left:20%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="20">
+								<span class="sv-string-viewer">20</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:80%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="80">
-						<span class="sv-string-viewer">80</span>
+					<div class="sd-slider__label" style="left:40%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="40">
+								<span class="sv-string-viewer">40</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:100%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="100">
-						<span class="sv-string-viewer">100</span>
+					<div class="sd-slider__label" style="left:60%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="60">
+								<span class="sv-string-viewer">60</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:80%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="80">
+								<span class="sv-string-viewer">80</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:100%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="100">
+								<span class="sv-string-viewer">100</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/slider-single-mode.snap.html b/tests/markup/snapshots/slider-single-mode.snap.html
index 2105ac1d90..a1a42b8700 100644
--- a/tests/markup/snapshots/slider-single-mode.snap.html
+++ b/tests/markup/snapshots/slider-single-mode.snap.html
@@ -1,79 +1,83 @@
-<div class="sd-slider sd-slider--single">
-	<div class="sd-slider-container">
-		<div class="sd-slider-container__slider">
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
-			</div>
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:100%;">
-			</div>
-			<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:100%;">
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container sd-slider__thumb-container--indeterminate" style="left:0%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">0</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-slider sd-slider--single">
+			<div class="sd-slider-container">
+				<div class="sd-slider-container__slider">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:100%;">
 					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="sd-slider-labels-container">
-		<div>
-			<div class="sd-slider__label" style="left:0%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="0">
-						<span class="sv-string-viewer">0</span>
+					<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:100%;">
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:20%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="20">
-						<span class="sv-string-viewer">20</span>
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container sd-slider__thumb-container--indeterminate" style="left:0%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">0</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-			<div class="sd-slider__label" style="left:40%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="40">
-						<span class="sv-string-viewer">40</span>
+			<div class="sd-slider-labels-container">
+				<div>
+					<div class="sd-slider__label" style="left:0%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="0">
+								<span class="sv-string-viewer">0</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:60%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="60">
-						<span class="sv-string-viewer">60</span>
+					<div class="sd-slider__label" style="left:20%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="20">
+								<span class="sv-string-viewer">20</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:80%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="80">
-						<span class="sv-string-viewer">80</span>
+					<div class="sd-slider__label" style="left:40%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="40">
+								<span class="sv-string-viewer">40</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:100%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="100">
-						<span class="sv-string-viewer">100</span>
+					<div class="sd-slider__label" style="left:60%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="60">
+								<span class="sv-string-viewer">60</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:80%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="80">
+								<span class="sv-string-viewer">80</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:100%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="100">
+								<span class="sv-string-viewer">100</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/survey-navigation.snap.html b/tests/markup/snapshots/survey-navigation.snap.html
index 183e36f65b..83619248a7 100644
--- a/tests/markup/snapshots/survey-navigation.snap.html
+++ b/tests/markup/snapshots/survey-navigation.snap.html
@@ -5,12 +5,18 @@
 		<div class="sv-components-column sv-components-column--expandable">
 			<div class="sd-body sd-body--static" id="testidpage0">
 				<div class="sd-body__page sd-page sd-page__empty-header">
-					<div class="sd-clearfix sd-page__row sd-row">
-						<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-							<div class="sd-element sd-question sd-question--html sd-row__question" data-name="q1" id="testid0">
-								<div class="sd-element__content sd-question__content" role="presentation">
-									<div class="sd-html">
-										<div>
+					<div class="sd-page__content">
+						<div class="sd-clearfix sd-page__row sd-row">
+							<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+								<div class="sd-element sd-question sd-question--html sd-row__question" data-name="q1" id="testid0">
+									<div class="sd-question__container">
+										<div class="sd-question__header-and-content-container">
+											<div class="sd-element__content sd-question__content" role="presentation">
+												<div class="sd-html">
+													<div>
+													</div>
+												</div>
+											</div>
 										</div>
 									</div>
 								</div>
diff --git a/tests/markup/snapshots/tagbox-disabled-with-value.snap.html b/tests/markup/snapshots/tagbox-disabled-with-value.snap.html
index 89cd230e59..3a8ada31d6 100644
--- a/tests/markup/snapshots/tagbox-disabled-with-value.snap.html
+++ b/tests/markup/snapshots/tagbox-disabled-with-value.snap.html
@@ -1,42 +1,46 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-expanded="false" aria-invalid="false" aria-label="Question title" class="sd-dropdown sd-formbox sd-formbox--editable sd-tagbox" disabled="" role="combobox">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<div class="sd-tagbox-item">
-					<div class="sd-tagbox-item__text">
-						<span class="sv-string-editor" contenteditable="true">item1</span>
-					</div>
-					<div class="sd-tagbox-item__clean">
-						<div class="sd-tagbox-item__clean-button" tabindex="0">
-							<svg class="sd-tagbox-item__clean-button-svg sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-clear-16x16" class="">
-								</use>
-							</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-expanded="false" aria-invalid="false" aria-label="Question title" class="sd-dropdown sd-formbox sd-formbox--editable sd-tagbox" disabled="" role="combobox">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<div class="sd-tagbox-item">
+							<div class="sd-tagbox-item__text">
+								<span class="sv-string-editor" contenteditable="true">item1</span>
+							</div>
+							<div class="sd-tagbox-item__clean">
+								<div class="sd-tagbox-item__clean-button" tabindex="0">
+									<svg class="sd-tagbox-item__clean-button-svg sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-clear-16x16" class="">
+										</use>
+									</svg>
+								</div>
+							</div>
 						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-clean-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Clear" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-cancel-24x24" class="">
-								</use>
-								<title class="">Clear</title>
-							</svg>
-						</button>
-					</div>
-				</div>
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-clean-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Clear" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-cancel-24x24" class="">
+										</use>
+										<title class="">Clear</title>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/tagbox-disabled-without-value.snap.html b/tests/markup/snapshots/tagbox-disabled-without-value.snap.html
index 4bba24fd83..dc0b1c6592 100644
--- a/tests/markup/snapshots/tagbox-disabled-without-value.snap.html
+++ b/tests/markup/snapshots/tagbox-disabled-without-value.snap.html
@@ -1,23 +1,27 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-expanded="false" aria-invalid="false" aria-label="Question title" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty" disabled="" role="combobox">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<div class="sd-tagbox__hint">
-					<div class="sd-tagbox__hint-suffix-wrapper">
-						<input autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" disabled="" inputmode="text" placeholder="Select..." readonly="" size="1" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-expanded="false" aria-invalid="false" aria-label="Question title" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty" disabled="" role="combobox">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<div class="sd-tagbox__hint">
+							<div class="sd-tagbox__hint-suffix-wrapper">
+								<input autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" disabled="" inputmode="text" placeholder="Select..." readonly="" size="1" type="text">
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/tagbox-mobile.snap.html b/tests/markup/snapshots/tagbox-mobile.snap.html
index 31dc5695f9..1fdc80204b 100644
--- a/tests/markup/snapshots/tagbox-mobile.snap.html
+++ b/tests/markup/snapshots/tagbox-mobile.snap.html
@@ -1,82 +1,86 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<div class="sd-tagbox__hint">
-					<div class="sd-tagbox__hint-suffix-wrapper">
-						<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="none" placeholder="Select..." readonly="" role="combobox" size="1" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<div class="sd-tagbox__hint">
+							<div class="sd-tagbox__hint-suffix-wrapper">
+								<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="none" placeholder="Select..." readonly="" role="combobox" size="1" type="text">
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-tablet" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__filter">
-										<div class="sd-selectlist-filter__box">
-											<div class="sd-selectlist__filter-icon">
-												<svg class="sv-svg-icon" role="presentation">
-													<use xlink:href="#icon-search-24x24" class="">
-													</use>
-												</svg>
+				<div>
+					<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-tablet" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__filter">
+												<div class="sd-selectlist-filter__box">
+													<div class="sd-selectlist__filter-icon">
+														<svg class="sv-svg-icon" role="presentation">
+															<use xlink:href="#icon-search-24x24" class="">
+															</use>
+														</svg>
+													</div>
+													<input aria-label="Type to search..." class="sd-selectlist__input" placeholder="Type to search..." type="text">
+												</div>
 											</div>
-											<input aria-label="Type to search..." class="sd-selectlist__input" placeholder="Type to search..." type="text" value="">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											</div>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item1</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item2</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item3</span>
+													</div>
+												</li>
+											</ul>
 										</div>
 									</div>
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item1</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item2</span>
+								</div>
+								<div class="sv-popup__body-footer">
+									<div class="sd-action-bar sd-action-bar--default-size sv-menu-footer-action-bar">
+										<div class="sd-action-bar__item">
+											<div class="sd-action-bar__item-content">
+												<button class="sd-action sd-action--brand sd-action--small sd-action--tertiary sv-popup__button sv-popup__button--cancel" role="button" tabindex="0" type="button">
+													<span class="sd-action__title">Cancel</span>
+												</button>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item3</span>
+										</div>
+										<div class="sd-action-bar__item sd-action-bar__item--space">
+											<div class="sd-action-bar__item-content">
+												<button class="sd-action sd-action--brand sd-action--small sd-action--tertiary sv-popup__button sv-popup__button--done" disabled="" role="button" tabindex="0" type="button">
+													<span class="sd-action__title">OK</span>
+												</button>
 											</div>
-										</li>
-									</ul>
-								</div>
-							</div>
-						</div>
-						<div class="sv-popup__body-footer">
-							<div class="sd-action-bar sd-action-bar--default-size sv-menu-footer-action-bar">
-								<div class="sd-action-bar__item">
-									<div class="sd-action-bar__item-content">
-										<button class="sd-action sd-action--brand sd-action--small sd-action--tertiary sv-popup__button sv-popup__button--cancel" role="button" tabindex="0" type="button">
-											<span class="sd-action__title">Cancel</span>
-										</button>
-									</div>
-								</div>
-								<div class="sd-action-bar__item sd-action-bar__item--space">
-									<div class="sd-action-bar__item-content">
-										<button class="sd-action sd-action--brand sd-action--small sd-action--tertiary sv-popup__button sv-popup__button--done" disabled="" role="button" tabindex="0" type="button">
-											<span class="sd-action__title">OK</span>
-										</button>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/tagbox-readonly-with-value.snap.html b/tests/markup/snapshots/tagbox-readonly-with-value.snap.html
index c543486633..f95a65000c 100644
--- a/tests/markup/snapshots/tagbox-readonly-with-value.snap.html
+++ b/tests/markup/snapshots/tagbox-readonly-with-value.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-formbox sd-formbox--readonly sd-tagbox sd-tagbox--readonly" id="testid0i" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<span class="sv-string-viewer">item1, item3</span>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-formbox sd-formbox--readonly sd-tagbox sd-tagbox--readonly" id="testid0i" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<span class="sv-string-viewer">item1, item3</span>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/tagbox-readonly.snap.html b/tests/markup/snapshots/tagbox-readonly.snap.html
index 60693965cf..06cd92e9eb 100644
--- a/tests/markup/snapshots/tagbox-readonly.snap.html
+++ b/tests/markup/snapshots/tagbox-readonly.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--readonly sd-tagbox sd-tagbox--empty sd-tagbox--readonly" id="testid0i" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<span class="sv-string-viewer">Select...</span>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--readonly sd-tagbox sd-tagbox--empty sd-tagbox--readonly" id="testid0i" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<span class="sv-string-viewer">Select...</span>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/tagbox-selected.snap.html b/tests/markup/snapshots/tagbox-selected.snap.html
index 09accbc51d..6a3fa19a64 100644
--- a/tests/markup/snapshots/tagbox-selected.snap.html
+++ b/tests/markup/snapshots/tagbox-selected.snap.html
@@ -1,78 +1,82 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-formbox sd-formbox--editable sd-tagbox">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<div class="sd-tagbox-item">
-					<div class="sd-tagbox-item__text">
-						<span class="sv-string-viewer">item1</span>
-					</div>
-					<div class="sd-tagbox-item__clean">
-						<div class="sd-tagbox-item__clean-button" tabindex="0">
-							<svg class="sd-tagbox-item__clean-button-svg sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-clear-16x16" class="">
-								</use>
-							</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-formbox sd-formbox--editable sd-tagbox">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<div class="sd-tagbox-item">
+							<div class="sd-tagbox-item__text">
+								<span class="sv-string-viewer">item1</span>
+							</div>
+							<div class="sd-tagbox-item__clean">
+								<div class="sd-tagbox-item__clean-button" tabindex="0">
+									<svg class="sd-tagbox-item__clean-button-svg sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-clear-16x16" class="">
+										</use>
+									</svg>
+								</div>
+							</div>
+						</div>
+						<div class="sd-tagbox__hint">
+							<div class="sd-tagbox__hint-suffix-wrapper">
+								<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="" readonly="" role="combobox" size="1" type="text">
+							</div>
 						</div>
 					</div>
-				</div>
-				<div class="sd-tagbox__hint">
-					<div class="sd-tagbox__hint-suffix-wrapper">
-						<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="" readonly="" role="combobox" size="1" type="text">
-					</div>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-clean-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-cancel-24x24" class="">
-								</use>
-								<title class="">Clear</title>
-							</svg>
-						</button>
-					</div>
-				</div>
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-clean-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-cancel-24x24" class="">
+										</use>
+										<title class="">Clear</title>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="true" class="sd-selectlist__item sd-selectlist__item--selected sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item1</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item2</span>
+				<div>
+					<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item3</span>
-											</div>
-										</li>
-									</ul>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="true" class="sd-selectlist__item sd-selectlist__item--selected sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item1</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item2</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item3</span>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/tagbox-without-clear-button.snap.html b/tests/markup/snapshots/tagbox-without-clear-button.snap.html
index e376e9e9a7..cff491ff38 100644
--- a/tests/markup/snapshots/tagbox-without-clear-button.snap.html
+++ b/tests/markup/snapshots/tagbox-without-clear-button.snap.html
@@ -1,54 +1,58 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<div class="sd-tagbox__hint">
-					<div class="sd-tagbox__hint-suffix-wrapper">
-						<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" size="1" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<div class="sd-tagbox__hint">
+							<div class="sd-tagbox__hint-suffix-wrapper">
+								<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" size="1" type="text">
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item1</span>
+				<div>
+					<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item2</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item3</span>
-											</div>
-										</li>
-									</ul>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item1</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item2</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item3</span>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/tagbox-without-search.snap.html b/tests/markup/snapshots/tagbox-without-search.snap.html
index b4990951d9..4511302969 100644
--- a/tests/markup/snapshots/tagbox-without-search.snap.html
+++ b/tests/markup/snapshots/tagbox-without-search.snap.html
@@ -1,54 +1,58 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<div class="sd-tagbox__hint">
-					<div class="sd-tagbox__hint-suffix-wrapper">
-						<input autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="Select..." readonly="" size="1" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<div class="sd-tagbox__hint">
+							<div class="sd-tagbox__hint-suffix-wrapper">
+								<input autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="Select..." readonly="" size="1" type="text">
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item1</span>
+				<div>
+					<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item2</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item3</span>
-											</div>
-										</li>
-									</ul>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item1</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item2</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item3</span>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/tagbox-without-textWrapEnabled.snap.html b/tests/markup/snapshots/tagbox-without-textWrapEnabled.snap.html
index e497c72452..e22cb6cd7d 100644
--- a/tests/markup/snapshots/tagbox-without-textWrapEnabled.snap.html
+++ b/tests/markup/snapshots/tagbox-without-textWrapEnabled.snap.html
@@ -1,54 +1,58 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<div class="sd-tagbox__hint">
-					<div class="sd-tagbox__hint-suffix-wrapper">
-						<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" size="1" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<div class="sd-tagbox__hint">
+							<div class="sd-tagbox__hint-suffix-wrapper">
+								<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" size="1" type="text">
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item1</span>
+				<div>
+					<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item2</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item3</span>
-											</div>
-										</li>
-									</ul>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item1</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item2</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item3</span>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/tagbox.snap.html b/tests/markup/snapshots/tagbox.snap.html
index e376e9e9a7..cff491ff38 100644
--- a/tests/markup/snapshots/tagbox.snap.html
+++ b/tests/markup/snapshots/tagbox.snap.html
@@ -1,54 +1,58 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<div class="sd-tagbox__hint">
-					<div class="sd-tagbox__hint-suffix-wrapper">
-						<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" size="1" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<div class="sd-tagbox__hint">
+							<div class="sd-tagbox__hint-suffix-wrapper">
+								<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" size="1" type="text">
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item1</span>
+				<div>
+					<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item2</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item3</span>
-											</div>
-										</li>
-									</ul>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item1</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item2</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item3</span>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/text-datalist.snap.html b/tests/markup/snapshots/text-datalist.snap.html
index 65e1a4413a..470a795c3b 100644
--- a/tests/markup/snapshots/text-datalist.snap.html
+++ b/tests/markup/snapshots/text-datalist.snap.html
@@ -1,11 +1,15 @@
-<div class="sd-formbox sd-text">
-	<input aria-invalid="false" aria-label="q1" aria-required="false" class="sd-formbox__input" id="testid0i" list="testid0_datalist" placeholder="" type="text">
-	<datalist id="testid0_datalist">
-		<option value="abc">
-		</option>
-		<option value="def">
-		</option>
-		<option value="ghk">
-		</option>
-	</datalist>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-text">
+			<input aria-invalid="false" aria-label="q1" aria-required="false" class="sd-formbox__input" id="testid0i" list="testid0_datalist" placeholder="" type="text">
+			<datalist id="testid0_datalist">
+				<option value="abc">
+				</option>
+				<option value="def">
+				</option>
+				<option value="ghk">
+				</option>
+			</datalist>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/text-date.snap.html b/tests/markup/snapshots/text-date.snap.html
index 41993aa703..f3cdb7495a 100644
--- a/tests/markup/snapshots/text-date.snap.html
+++ b/tests/markup/snapshots/text-date.snap.html
@@ -1,3 +1,7 @@
-<div class="sd-formbox sd-text">
-	<input aria-invalid="false" aria-label="Question title" aria-required="true" autocomplete="bdate" class="sd-formbox__input" id="testid0i" max="2999-12-31" placeholder="" type="date">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-text">
+			<input aria-invalid="false" aria-label="Question title" aria-required="true" autocomplete="bdate" class="sd-formbox__input" id="testid0i" max="2999-12-31" placeholder="" type="date">
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/text-disabled.snap.html b/tests/markup/snapshots/text-disabled.snap.html
index 719c476134..4ae940efc1 100644
--- a/tests/markup/snapshots/text-disabled.snap.html
+++ b/tests/markup/snapshots/text-disabled.snap.html
@@ -1,3 +1,7 @@
-<div class="sd-formbox sd-text">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-formbox__input" disabled="" id="testid0i" placeholder="" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-text">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-formbox__input" disabled="" id="testid0i" placeholder="" type="text">
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/text-div.snap.html b/tests/markup/snapshots/text-div.snap.html
index 9c63860be3..ef8ed2f97c 100644
--- a/tests/markup/snapshots/text-div.snap.html
+++ b/tests/markup/snapshots/text-div.snap.html
@@ -1,3 +1,7 @@
-<div class="sd-formbox sd-formbox--readonly sd-text">
-	<div>test</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-formbox--readonly sd-text">
+			<div>test</div>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/text-email.snap.html b/tests/markup/snapshots/text-email.snap.html
index a7e38d37c4..a2f971b836 100644
--- a/tests/markup/snapshots/text-email.snap.html
+++ b/tests/markup/snapshots/text-email.snap.html
@@ -1,3 +1,7 @@
-<div class="sd-formbox sd-text">
-	<input aria-invalid="false" aria-label="Your e-mail:" aria-required="true" autocomplete="email" class="sd-formbox__input" id="testid0i" placeholder="jon.snow@nightwatch.org" type="email">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-text">
+			<input aria-invalid="false" aria-label="Your e-mail:" aria-required="true" autocomplete="email" class="sd-formbox__input" id="testid0i" placeholder="jon.snow@nightwatch.org" type="email">
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/text-masktype-numeric.snap.html b/tests/markup/snapshots/text-masktype-numeric.snap.html
index 4f8017cd36..74b1efbbe3 100644
--- a/tests/markup/snapshots/text-masktype-numeric.snap.html
+++ b/tests/markup/snapshots/text-masktype-numeric.snap.html
@@ -1,3 +1,7 @@
-<div class="sd-formbox sd-text">
-	<input aria-invalid="false" aria-label="q1" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" style="text-align:right;" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-text">
+			<input aria-invalid="false" aria-label="q1" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" style="text-align:right;" type="text">
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/text-readonly.snap.html b/tests/markup/snapshots/text-readonly.snap.html
index 1729d17e86..d4b17ee57b 100644
--- a/tests/markup/snapshots/text-readonly.snap.html
+++ b/tests/markup/snapshots/text-readonly.snap.html
@@ -1,3 +1,7 @@
-<div class="sd-formbox sd-formbox--readonly sd-text">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-formbox__input" id="testid0i" readonly="" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-formbox--readonly sd-text">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-formbox__input" id="testid0i" readonly="" type="text">
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/text-typing.snap.html b/tests/markup/snapshots/text-typing.snap.html
index 9ee6fe066b..36d21cb438 100644
--- a/tests/markup/snapshots/text-typing.snap.html
+++ b/tests/markup/snapshots/text-typing.snap.html
@@ -1,3 +1,7 @@
-<div class="sd-formbox sd-text">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-text">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/text.snap.html b/tests/markup/snapshots/text.snap.html
index 9ee6fe066b..36d21cb438 100644
--- a/tests/markup/snapshots/text.snap.html
+++ b/tests/markup/snapshots/text.snap.html
@@ -1,3 +1,7 @@
-<div class="sd-formbox sd-text">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-text">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+		</div>
+	</div>
 </div>
\ No newline at end of file