diff --git a/core/modules/field_layout/tests/src/FunctionalJavascript/FieldLayoutTest.php b/core/modules/field_layout/tests/src/FunctionalJavascript/FieldLayoutTest.php
index a0fd13c0fa..337d409809 100644
--- a/core/modules/field_layout/tests/src/FunctionalJavascript/FieldLayoutTest.php
+++ b/core/modules/field_layout/tests/src/FunctionalJavascript/FieldLayoutTest.php
@@ -90,46 +90,46 @@ public function testEntityForm() {
 
     // The field is moved to the default region for the new layout.
     $this->assertSession()->pageTextContains('Your settings have been saved.');
-    $this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
+    $this->assertEquals(['Top', 'First', 'Second', 'Bottom', 'Disabled'], $this->getRegionTitles());
 
     $this->drupalGet('entity_test/manage/1/edit');
     // No fields are visible, and the regions don't display when empty.
-    $this->assertFieldInRegion('field_test_text[0][value]', 'left');
-    $this->assertSession()->elementExists('css', '.layout-region--left .field--name-field-test-text');
+    $this->assertFieldInRegion('field_test_text[0][value]', 'first');
+    $this->assertSession()->elementExists('css', '.layout-region--first .field--name-field-test-text');
 
     // After a refresh the new regions are still there.
     $this->drupalGet('entity_test/structure/entity_test/form-display');
-    $this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
+    $this->assertEquals(['Top', 'First', 'Second', 'Bottom', 'Disabled'], $this->getRegionTitles());
 
-    // Drag the field to the right region.
+    // Drag the field to the second region.
     $field_test_text_row = $this->getSession()->getPage()->find('css', '#field-test-text');
-    $right_region_row = $this->getSession()->getPage()->find('css', '.region-right-message');
-    $field_test_text_row->find('css', '.handle')->dragTo($right_region_row);
+    $second_region_row = $this->getSession()->getPage()->find('css', '.region-second-message');
+    $field_test_text_row->find('css', '.handle')->dragTo($second_region_row);
     $this->assertSession()->assertWaitOnAjaxRequest();
     $this->submitForm([], 'Save');
     $this->assertSession()->pageTextContains('Your settings have been saved.');
 
     // The new layout is used.
     $this->drupalGet('entity_test/manage/1/edit');
-    $this->assertSession()->elementExists('css', '.layout-region--right .field--name-field-test-text');
-    $this->assertFieldInRegion('field_test_text[0][value]', 'right');
+    $this->assertSession()->elementExists('css', '.layout-region--second .field--name-field-test-text');
+    $this->assertFieldInRegion('field_test_text[0][value]', 'second');
 
-    // Move the field to the right region without tabledrag.
+    // Move the field to the second region without tabledrag.
     $this->drupalGet('entity_test/structure/entity_test/form-display');
     $this->getSession()->getPage()->pressButton('Show row weights');
-    $this->getSession()->getPage()->selectFieldOption('fields[field_test_text][region]', 'right');
+    $this->getSession()->getPage()->selectFieldOption('fields[field_test_text][region]', 'second');
     $this->assertSession()->assertWaitOnAjaxRequest();
     $this->submitForm([], 'Save');
     $this->assertSession()->pageTextContains('Your settings have been saved.');
 
     // The updated region is used.
     $this->drupalGet('entity_test/manage/1/edit');
-    $this->assertFieldInRegion('field_test_text[0][value]', 'right');
+    $this->assertFieldInRegion('field_test_text[0][value]', 'second');
 
     // The layout is still in use without Field UI.
     $this->container->get('module_installer')->uninstall(['field_ui']);
     $this->drupalGet('entity_test/manage/1/edit');
-    $this->assertFieldInRegion('field_test_text[0][value]', 'right');
+    $this->assertFieldInRegion('field_test_text[0][value]', 'second');
   }
 
   /**
@@ -147,7 +147,7 @@ public function testEntityView() {
     $this->submitForm([], 'Save');
 
     $this->assertSession()->pageTextContains('Your settings have been saved.');
-    $this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
+    $this->assertEquals(['Top', 'First', 'Second', 'Bottom', 'Disabled'], $this->getRegionTitles());
 
     $this->drupalGet('entity_test/1');
     // No fields are visible, and the regions don't display when empty.
@@ -157,13 +157,13 @@ public function testEntityView() {
 
     // After a refresh the new regions are still there.
     $this->drupalGet('entity_test/structure/entity_test/display');
-    $this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
+    $this->assertEquals(['Top', 'First', 'Second', 'Bottom', 'Disabled'], $this->getRegionTitles());
 
-    // Drag the field to the left region.
+    // Drag the field to the first region.
     $this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'hidden')->isSelected());
     $field_test_text_row = $this->getSession()->getPage()->find('css', '#field-test-text');
-    $left_region_row = $this->getSession()->getPage()->find('css', '.region-left-message');
-    $field_test_text_row->find('css', '.handle')->dragTo($left_region_row);
+    $first_region_row = $this->getSession()->getPage()->find('css', '.region-first-message');
+    $field_test_text_row->find('css', '.handle')->dragTo($first_region_row);
     $this->assertSession()->assertWaitOnAjaxRequest();
     $this->assertFalse($this->assertSession()->optionExists('fields[field_test_text][region]', 'hidden')->isSelected());
     $this->submitForm([], 'Save');
@@ -172,25 +172,25 @@ public function testEntityView() {
     // The new layout is used.
     $this->drupalGet('entity_test/1');
     $this->assertSession()->elementExists('css', '.layout--twocol');
-    $this->assertSession()->elementExists('css', '.layout-region--left .field--name-field-test-text');
+    $this->assertSession()->elementExists('css', '.layout-region--first .field--name-field-test-text');
 
-    // Move the field to the right region without tabledrag.
+    // Move the field to the second region without tabledrag.
     $this->drupalGet('entity_test/structure/entity_test/display');
     $this->getSession()->getPage()->pressButton('Show row weights');
-    $this->getSession()->getPage()->selectFieldOption('fields[field_test_text][region]', 'right');
+    $this->getSession()->getPage()->selectFieldOption('fields[field_test_text][region]', 'second');
     $this->assertSession()->assertWaitOnAjaxRequest();
     $this->submitForm([], 'Save');
     $this->assertSession()->pageTextContains('Your settings have been saved.');
 
     // The updated region is used.
     $this->drupalGet('entity_test/1');
-    $this->assertSession()->elementExists('css', '.layout-region--right .field--name-field-test-text');
+    $this->assertSession()->elementExists('css', '.layout-region--second .field--name-field-test-text');
 
     // The layout is still in use without Field UI.
     $this->container->get('module_installer')->uninstall(['field_ui']);
     $this->drupalGet('entity_test/1');
     $this->assertSession()->elementExists('css', '.layout--twocol');
-    $this->assertSession()->elementExists('css', '.layout-region--right .field--name-field-test-text');
+    $this->assertSession()->elementExists('css', '.layout-region--second .field--name-field-test-text');
   }
 
   /**
diff --git a/core/modules/layout_discovery/layout_discovery.layouts.yml b/core/modules/layout_discovery/layout_discovery.layouts.yml
index 98b1ed6126..d1b0e5a3a8 100644
--- a/core/modules/layout_discovery/layout_discovery.layouts.yml
+++ b/core/modules/layout_discovery/layout_discovery.layouts.yml
@@ -15,14 +15,14 @@ layout_twocol:
   template: layout--twocol
   library: layout_discovery/twocol
   category: 'Columns: 2'
-  default_region: left
+  default_region: first
   regions:
     top:
       label: Top
-    left:
-      label: Left
-    right:
-      label: Right
+    first:
+      label: First
+    second:
+      label: Second
     bottom:
       label: Bottom
 
@@ -36,16 +36,16 @@ layout_twocol_bricks:
   regions:
     top:
       label: Top
-    left_above:
-      label: 'Left above'
-    right_above:
-      label: 'Right above'
+    first_above:
+      label: 'First above'
+    second_above:
+      label: 'Second above'
     middle:
       label: Middle
-    left_below:
-      label: 'Left below'
-    right_below:
-      label: 'Right below'
+    first_below:
+      label: 'First below'
+    second_below:
+      label: 'Second below'
     bottom:
       label: Bottom
 
@@ -55,16 +55,16 @@ layout_threecol_25_50_25:
   template: layout--threecol-25-50-25
   library: layout_discovery/threecol_25_50_25
   category: 'Columns: 3'
-  default_region: left
+  default_region: second
   regions:
     top:
       label: Top
-    left:
-      label: Left
-    middle:
-      label: Middle
-    right:
-      label: Right
+    first:
+      label: First
+    second:
+      label: Second
+    third:
+      label: Third
     bottom:
       label: Bottom
 
@@ -74,15 +74,15 @@ layout_threecol_33_34_33:
   template: layout--threecol-33-34-33
   library: layout_discovery/threecol_33_34_33
   category: 'Columns: 3'
-  default_region: left
+  default_region: first
   regions:
     top:
       label: Top
-    left:
-      label: Left
-    middle:
-      label: Middle
-    right:
-      label: Right
+    first:
+      label: First
+    second:
+      label: Second
+    third:
+      label: Third
     bottom:
       label: Bottom
diff --git a/core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig b/core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig
index eb553cdf8a..fd4c648191 100644
--- a/core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig
+++ b/core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig
@@ -11,14 +11,14 @@
  */
 #}
 {%
-set classes = [
-'layout--onecol',
-]
+  set classes = [
+    'layout--onecol',
+  ]
 %}
 {% if content %}
-<div{{ attributes.addClass(classes) }}>
-  <div class="layout-region layout-region--content">
-    {{ content.content }}
+  <div{{ attributes.addClass(classes) }}>
+    <div class="layout-region layout-region--content">
+      {{ content.content }}
+    </div>
   </div>
-</div>
 {% endif %}
diff --git a/core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig b/core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig
index 78db2b4b32..6475695344 100644
--- a/core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig
+++ b/core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig
@@ -14,34 +14,40 @@
  */
 #}
 {%
-set classes = [
-'layout--threecol',
-]
+  set classes = [
+    'layout--threecol',
+  ]
 %}
 {% if content %}
-<div{{ attributes.addClass(classes) }}>
-  {% if content.top %}
-    <div class="layout-region layout-region--fullwidth">
-      {{ content.top }}
-    </div>
-  {% endif %}
+  <div{{ attributes.addClass(classes) }}>
+    {% if content.top %}
+      <div class="layout-region layout-region--top">
+        {{ content.top }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--side">
-    {{ content.left }}
-  </div>
+    {% if content.first %}
+      <div class="layout-region layout-region--first">
+        {{ content.first }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--middle">
-    {{ content.middle }}
-  </div>
+    {% if content.second %}
+      <div class="layout-region layout-region--second">
+        {{ content.second }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--side">
-    {{ content.right }}
-  </div>
+    {% if content.third %}
+      <div class="layout-region layout-region--third">
+        {{ content.third }}
+      </div>
+    {% endif %}
 
-  {% if content.bottom %}
-    <div class="layout-region layout-region--fullwidth">
-      {{ content.bottom }}
-    </div>
-  {% endif %}
-</div>
+    {% if content.bottom %}
+      <div class="layout-region layout-region--bottom">
+        {{ content.bottom }}
+      </div>
+    {% endif %}
+  </div>
 {% endif %}
diff --git a/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css b/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css
index 7472d55d66..d6d3b13173 100644
--- a/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css
+++ b/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css
@@ -1,17 +1,19 @@
 .layout--threecol {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
 }
 
-.layout--threecol > .layout-region {
-  flex: 0 1 25%;
-}
-
-.layout--threecol > .layout-region--fullwidth {
+.layout--threecol > .layout-region,
+.layout--threecol > .layout-region--second {
   flex: 0 1 100%;
 }
 
-.layout--threecol > .layout-region--middle {
-  flex: 0 1 50%;
+@media screen and (min-width: 40em) {
+  .layout--threecol > .layout-region--first,
+  .layout--threecol > .layout-region--third {
+    flex: 1 1 25%;
+  }
+  .layout--threecol > .layout-region--second {
+    flex: 1 1 50%;
+  }
 }
diff --git a/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig b/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig
index 59461f42c2..e5aa06166c 100644
--- a/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig
+++ b/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig
@@ -14,34 +14,40 @@
  */
 #}
 {%
-set classes = [
-'layout--threecol-33',
-]
+  set classes = [
+    'layout--threecol-33',
+  ]
 %}
 {% if content %}
-<div{{ attributes.addClass(classes) }}>
-  {% if content.top %}
-  <div class="layout-region layout-region--fullwidth">
-    {{ content.top }}
-  </div>
-  {% endif %}
+  <div{{ attributes.addClass(classes) }}>
+    {% if content.top %}
+      <div class="layout-region layout-region--top">
+        {{ content.top }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region">
-    {{ content.left }}
-  </div>
+    {% if content.first %}
+      <div class="layout-region layout-region--first">
+        {{ content.first }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region">
-    {{ content.middle }}
-  </div>
+    {% if content.second %}
+      <div class="layout-region layout-region--second">
+        {{ content.second }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region">
-    {{ content.right }}
-  </div>
+    {% if content.third %}
+      <div class="layout-region layout-region--third">
+        {{ content.third }}
+      </div>
+    {% endif %}
 
-  {% if content.bottom %}
-  <div class="layout-region layout-region--fullwidth">
-    {{ content.bottom }}
+    {% if content.bottom %}
+      <div class="layout-region layout-region--bottom">
+        {{ content.bottom }}
+      </div>
+    {% endif %}
   </div>
-  {% endif %}
-</div>
 {% endif %}
diff --git a/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css b/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css
index 7091416fdf..f01e55ca80 100644
--- a/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css
+++ b/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css
@@ -1,13 +1,16 @@
 .layout--threecol-33 {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
 }
 
-.layout--threecol-33 > .layout-region {
-  flex: 0 1 33%;
+.layout--threecol > .layout-region {
+  flex: 0 1 100%;
 }
 
-.layout--threecol-33 > .layout-region--fullwidth {
-  flex: 0 1 100%;
+@media screen and (min-width: 40em) {
+  .layout--threecol-33 > .layout-region--first,
+  .layout--threecol-33 > .layout-region--second,
+  .layout--threecol-33 > .layout-region--third {
+    flex: 0 1 33%;
+  }
 }
diff --git a/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig b/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig
index efebf0f95e..2ad674065e 100644
--- a/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig
+++ b/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig
@@ -11,26 +11,34 @@
  */
 #}
 {%
-set classes = [
-'layout--twocol',
-]
+  set classes = [
+    'layout--twocol',
+  ]
 %}
 {% if content %}
   <div{{ attributes.addClass(classes) }}>
-    <div class="layout-region layout-region--fullwidth">
-      {{ content.top }}
-    </div>
+    {% if content.top %}
+      <div class="layout-region layout-region--top">
+        {{ content.top }}
+      </div>
+    {% endif %}
 
-    <div class="layout-region layout-region--left">
-      {{ content.left }}
-    </div>
+    {% if content.first %}
+      <div class="layout-region layout-region--first">
+        {{ content.first }}
+      </div>
+    {% endif %}
 
-    <div class="layout-region layout-region--right">
-      {{ content.right }}
-    </div>
+    {% if content.second %}
+      <div class="layout-region layout-region--second">
+        {{ content.second }}
+      </div>
+    {% endif %}
 
-    <div class="layout-region layout-region--fullwidth">
-      {{ content.bottom }}
-    </div>
+    {% if content.bottom %}
+      <div class="layout-region layout-region--bottom">
+        {{ content.bottom }}
+      </div>
+    {% endif %}
   </div>
 {% endif %}
diff --git a/core/modules/layout_discovery/layouts/twocol/twocol.css b/core/modules/layout_discovery/layouts/twocol/twocol.css
index 41e8883ddf..13d32fd47d 100644
--- a/core/modules/layout_discovery/layouts/twocol/twocol.css
+++ b/core/modules/layout_discovery/layouts/twocol/twocol.css
@@ -1,13 +1,15 @@
 .layout--twocol {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
 }
 
 .layout--twocol > .layout-region {
-  flex: 0 1 50%;
+  flex: 0 1 100%;
 }
 
-.layout--twocol > .layout-region--fullwidth {
-  flex: 0 1 100%;
+@media screen and (min-width: 40em) {
+  .layout--twocol > .layout-region--first,
+  .layout--twocol > .layout-region--second {
+    flex: 0 1 50%;
+  }
 }
diff --git a/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig b/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig
index 9c6231b8b5..764c4afa81 100644
--- a/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig
+++ b/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig
@@ -14,38 +14,52 @@
  */
 #}
 {%
-set classes = [
-'layout--twocol-bricks',
-]
+  set classes = [
+    'layout--twocol-bricks',
+  ]
 %}
 {% if content %}
-<div{{ attributes.addClass(classes) }}>
-  <div class="layout-region layout-region--fullwidth">
-    {{ content.top }}
-  </div>
+  <div{{ attributes.addClass(classes) }}>
+    {% if content.top %}
+      <div class="layout-region layout-region--top">
+        {{ content.top }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--left_above">
-    {{ content.left_above }}
-  </div>
+    {% if content.first_above %}
+      <div class="layout-region layout-region--first-above">
+        {{ content.first_above }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--right_above">
-    {{ content.right_above }}
-  </div>
+    {% if content.second_above %}
+      <div class="layout-region layout-region--second-above">
+        {{ content.second_above }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--middle">
-    {{ content.middle }}
-  </div>
+    {% if content.middle %}
+      <div class="layout-region layout-region--middle">
+        {{ content.middle }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--left_below">
-    {{ content.left_below }}
-  </div>
+    {% if content.first_below %}
+      <div class="layout-region layout-region--first-below">
+        {{ content.first_below }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--right_below">
-    {{ content.right_below }}
-  </div>
+    {% if content.second_below %}
+      <div class="layout-region layout-region--second-below">
+        {{ content.second_below }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--fullwidth">
-    {{ content.bottom }}
+    {% if content.bottom %}
+      <div class="layout-region layout-region--bottom">
+        {{ content.bottom }}
+      </div>
+    {% endif %}
   </div>
-</div>
 {% endif %}
diff --git a/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css b/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css
index aef887a4ac..18a38f58d8 100644
--- a/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css
+++ b/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css
@@ -1,13 +1,17 @@
 .layout--twocol-bricks {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
 }
 
 .layout--twocol-bricks > .layout-region {
-  flex: 0 1 50%;
+  flex: 0 1 100%;
 }
 
-.layout--twocol-bricks > .layout-region--fullwidth {
-  flex: 0 1 100%;
+@media screen and (min-width: 40em) {
+  .layout--twocol-bricks > .layout-region--first-above,
+  .layout--twocol-bricks > .layout-region--second-above,
+  .layout--twocol-bricks > .layout-region--first-below,
+  .layout--twocol-bricks > .layout-region--second-below {
+    flex: 0 1 50%;
+  }
 }
diff --git a/core/modules/layout_discovery/templates/layout.html.twig b/core/modules/layout_discovery/templates/layout.html.twig
index 88ea7457d4..5aa58b1592 100644
--- a/core/modules/layout_discovery/templates/layout.html.twig
+++ b/core/modules/layout_discovery/templates/layout.html.twig
@@ -4,15 +4,17 @@
  * Template for a generic layout.
  */
 #}
-{% set classes = [
-  'layout--' ~ layout.id|clean_class,
-] %}
+{%
+  set classes = [
+    'layout--' ~ layout.id|clean_class,
+  ]
+%}
 {% if content %}
-<div{{ attributes.addClass(classes) }}>
-{% for region in layout.getRegionNames %}
-  <div class="{{ 'region--' ~ region|clean_class }}">
-    {{ content[region] }}
+  <div{{ attributes.addClass(classes) }}>
+  {% for region in layout.getRegionNames %}
+    <div class="{{ 'region--' ~ region|clean_class }}">
+      {{ content[region] }}
+    </div>
+  {% endfor %}
   </div>
-{% endfor %}
-</div>
 {% endif %}
diff --git a/core/modules/layout_discovery/tests/src/Kernel/LayoutTest.php b/core/modules/layout_discovery/tests/src/Kernel/LayoutTest.php
index 9d4c446d3c..cf60eac75b 100644
--- a/core/modules/layout_discovery/tests/src/Kernel/LayoutTest.php
+++ b/core/modules/layout_discovery/tests/src/Kernel/LayoutTest.php
@@ -135,11 +135,11 @@ public function renderLayoutData() {
     ];
 
     $data['layout_onecol'][] = <<<'EOD'
-<div data-drupal-selector="edit-layout" class="layout--onecol">
-  <div class="layout-region layout-region--content">
-    This is the content
+  <div data-drupal-selector="edit-layout" class="layout--onecol">
+    <div class="layout-region layout-region--content">
+      This is the content
+    </div>
   </div>
-</div>
 EOD;
 
     $data['layout_test_1col_with_form'][] = <<<'EOD'
@@ -165,14 +165,14 @@ public function renderLayoutData() {
 EOD;
 
     $data['layout_test_1col_no_template'][] = <<<'EOD'
-<div data-drupal-selector="edit-layout" class="layout--layout-test-1col-no-template">
-  <div class="region--top">
-    This is the top
-  </div>
-  <div class="region--bottom">
-    This is the bottom
-  </div>
-</div>
+  <div data-drupal-selector="edit-layout" class="layout--layout-test-1col-no-template">
+      <div class="region--top">
+      This is the top
+    </div>
+      <div class="region--bottom">
+      This is the bottom
+    </div>
+    </div>
 EOD;
 
     $data['layout_test_2col'][] = <<<'EOD'