diff --git a/dev/vscode-split-layout.html b/dev/vscode-split-layout.html
index 3d414f4c..e9afebc5 100644
--- a/dev/vscode-split-layout.html
+++ b/dev/vscode-split-layout.html
@@ -12,29 +12,9 @@
   <script type="module" src="../dist/vscode-scrollable/index.js"></script>
   <style>
     .split-layout-example {
-      border: 1px solid var(--vscode-editorWidget-border);
       height: 250px;
       width: 500px;
     }
-
-    .split-layout-content {
-      height: 100%;
-      /* overflow-y: auto; */
-    }
-
-    .split-layout-content.start {
-      border-bottom: 1px solid var(--vscode-editorWidget-border);
-      box-sizing: border-box;
-    }
-
-    .split-layout-nested-example {
-      height: 100%;
-      width: 100%;
-    }
-
-    .split-layout-nested-content {
-      height: 100%;
-    }
   </style>
 </head>
 
@@ -43,7 +23,7 @@
     <h2 class="story-title">Basic example</h2>
     <div class="story-content">
       <component-preview>
-        <vscode-split-layout class="split-layout-example" initial-position="25%" split="horizontal">
+        <vscode-split-layout class="split-layout-example" initial-position="25%" split="horizontal" handle-size="10">
           <div slot="start" class="split-layout-content start">
             <vscode-scrollable style="width: 100%; height: 100%;">
               Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
@@ -55,6 +35,15 @@ <h2 class="story-title">Basic example</h2>
               dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
               suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
               blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
+              ultricies sapien porttitor nec. Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
+              vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
+              eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
+              Vestibulum arcu leo, tempor nec pretium id, vehicula id odio. Etiam
+              ultricies ligula dolor, in tincidunt nunc maximus at. Curabitur tincidunt
+              nulla in magna pharetra commodo. Donec vestibulum mollis quam, ut consequat
+              dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
+              suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
+              blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
               ultricies sapien porttitor nec.
             </vscode-scrollable>
           </div>
@@ -69,6 +58,15 @@ <h2 class="story-title">Basic example</h2>
               dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
               suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
               blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
+              ultricies sapien porttitor nec. Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
+              vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
+              eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
+              Vestibulum arcu leo, tempor nec pretium id, vehicula id odio. Etiam
+              ultricies ligula dolor, in tincidunt nunc maximus at. Curabitur tincidunt
+              nulla in magna pharetra commodo. Donec vestibulum mollis quam, ut consequat
+              dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
+              suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
+              blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
               ultricies sapien porttitor nec.
             </vscode-scrollable>
           </div>
@@ -82,7 +80,7 @@ <h2 class="story-title">Basic example</h2>
     <div class="story-content">
       <component-preview>
         <vscode-split-layout class="split-layout-example">
-          <div slot="start" class="split-layout-content start">
+          <div slot="start">
             Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
             vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
             eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
@@ -94,34 +92,32 @@ <h2 class="story-title">Basic example</h2>
             blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
             ultricies sapien porttitor nec.
           </div>
-          <div slot="end" class="split-layout-content">
-            <vscode-split-layout split="horizontal" class="split-layout-nested-example">
-              <div slot="start" class="split-layout-nested-content start">
-                Praesent ultrices mauris lectus, eu molestie erat lacinia vitae.
-                Phasellus vestibulum pellentesque ligula malesuada sollicitudin. Vivamus
-                vitae erat eget nulla laoreet porttitor. Nullam sit amet leo et velit
-                molestie maximus. Vestibulum arcu leo, tempor nec pretium id, vehicula
-                id odio. Etiam ultricies ligula dolor, in tincidunt nunc maximus at.
-                Curabitur tincidunt nulla in magna pharetra commodo. Donec vestibulum
-                mollis quam, ut consequat dolor finibus ac. Nulla suscipit ac sem non
-                fringilla. Nullam eros ante, suscipit hendrerit molestie a, tempor nec
-                turpis. Morbi eget erat suscipit, blandit nibh nec, molestie augue.
-                Aenean consectetur dapibus mauris, eget ultricies sapien porttitor nec.
-              </div>
-              <div slot="end" class="split-layout-nested-content">
-                Praesent ultrices mauris lectus, eu molestie erat lacinia vitae.
-                Phasellus vestibulum pellentesque ligula malesuada sollicitudin. Vivamus
-                vitae erat eget nulla laoreet porttitor. Nullam sit amet leo et velit
-                molestie maximus. Vestibulum arcu leo, tempor nec pretium id, vehicula
-                id odio. Etiam ultricies ligula dolor, in tincidunt nunc maximus at.
-                Curabitur tincidunt nulla in magna pharetra commodo. Donec vestibulum
-                mollis quam, ut consequat dolor finibus ac. Nulla suscipit ac sem non
-                fringilla. Nullam eros ante, suscipit hendrerit molestie a, tempor nec
-                turpis. Morbi eget erat suscipit, blandit nibh nec, molestie augue.
-                Aenean consectetur dapibus mauris, eget ultricies sapien porttitor nec.
-              </div>
-            </vscode-split-layout>
-          </div>
+          <vscode-split-layout style="height: 100%;" split="horizontal" slot="end">
+            <div slot="start">
+              Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
+              vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
+              eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
+              Vestibulum arcu leo, tempor nec pretium id, vehicula id odio. Etiam
+              ultricies ligula dolor, in tincidunt nunc maximus at. Curabitur tincidunt
+              nulla in magna pharetra commodo. Donec vestibulum mollis quam, ut consequat
+              dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
+              suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
+              blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
+              ultricies sapien porttitor nec.
+            </div>
+            <div slot="end">
+              Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
+              vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
+              eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
+              Vestibulum arcu leo, tempor nec pretium id, vehicula id odio. Etiam
+              ultricies ligula dolor, in tincidunt nunc maximus at. Curabitur tincidunt
+              nulla in magna pharetra commodo. Donec vestibulum mollis quam, ut consequat
+              dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
+              suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
+              blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
+              ultricies sapien porttitor nec.
+            </div>
+          </vscode-split-layout>
         </vscode-split-layout>
       </component-preview>
     </div>
diff --git a/src/vscode-split-layout/vscode-split-layout.styles.ts b/src/vscode-split-layout/vscode-split-layout.styles.ts
index ff04746d..64d109dd 100644
--- a/src/vscode-split-layout/vscode-split-layout.styles.ts
+++ b/src/vscode-split-layout/vscode-split-layout.styles.ts
@@ -5,20 +5,42 @@ const styles: CSSResultGroup = [
   defaultStyles,
   css`
     :host {
+      --separator-border: var(--vscode-editorWidget-border, transparent);
+
+      border: 1px solid var(--vscode-editorWidget-border);
       display: block;
       overflow: hidden;
       position: relative;
     }
 
+    ::slotted(*) {
+      height: 100%;
+      width: 100%;
+    }
+
+    ::slotted(vscode-split-layout) {
+      border: 0;
+    }
+
     .start {
+      box-sizing: border-box;
       left: 0;
       top: 0;
       overflow: hidden;
       position: absolute;
     }
 
+    :host([split='vertical']) .start {
+      border-right: 1px solid var(--separator-border);
+    }
+
+    :host([split='horizontal']) .start {
+      border-bottom: 1px solid var(--separator-border);
+    }
+
     .end {
       bottom: 0;
+      box-sizing: border-box;
       overflow: hidden;
       position: absolute;
       right: 0;
diff --git a/src/vscode-split-layout/vscode-split-layout.ts b/src/vscode-split-layout/vscode-split-layout.ts
index 0b1def16..ee657e55 100644
--- a/src/vscode-split-layout/vscode-split-layout.ts
+++ b/src/vscode-split-layout/vscode-split-layout.ts
@@ -1,5 +1,10 @@
 import {html, TemplateResult} from 'lit';
-import {customElement, property, state} from 'lit/decorators.js';
+import {
+  customElement,
+  property,
+  queryAssignedElements,
+  state,
+} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {styleMap} from 'lit/directives/style-map.js';
 import {VscElement} from '../includes/VscElement.js';
@@ -12,7 +17,7 @@ import styles from './vscode-split-layout.styles.js';
 export class VscodeSplitLayout extends VscElement {
   static styles = styles;
 
-  @property()
+  @property({reflect: true})
   split: 'horizontal' | 'vertical' = 'vertical';
 
   @property({type: Boolean, reflect: true, attribute: 'reset-on-dbl-click'})
@@ -24,7 +29,7 @@ export class VscodeSplitLayout extends VscElement {
   @property({type: Number, reflect: true, attribute: 'handle-size'})
   handleSize = 4;
 
-  @property({attribute: 'initial-position'})
+  @property({reflect: true, attribute: 'initial-position'})
   initialPosition = '50%';
 
   @state()
@@ -54,18 +59,28 @@ export class VscodeSplitLayout extends VscElement {
   @state()
   private _hide = false;
 
+  @queryAssignedElements({slot: 'start', selector: 'vscode-split-layout'})
+  private _nestedLayoutsAtStart!: HTMLElement[];
+
+  @queryAssignedElements({slot: 'end', selector: 'vscode-split-layout'})
+  private _nestedLayoutsAtEnd!: HTMLElement[];
+
   private _boundRect: DOMRect = new DOMRect();
   private _handleOffset = 0;
 
   connectedCallback(): void {
     super.connectedCallback();
 
-    this._boundRect = this.getBoundingClientRect();
+    this._initPosition();
+  }
 
+  /** @internal */
+  initializeResizeHandler() {
     this._initPosition();
   }
 
   private _initPosition() {
+    this._boundRect = this.getBoundingClientRect();
     const {height, width} = this._boundRect;
     const maxPos = this.split === 'vertical' ? width : height;
     const matches = /(^[0-9.]+)(%{0,1})$/.exec(this.initialPosition);
@@ -112,6 +127,8 @@ export class VscodeSplitLayout extends VscElement {
   private _handleMouseDown(event: MouseEvent) {
     event.stopPropagation();
     event.preventDefault();
+
+    this._boundRect = this.getBoundingClientRect();
     const {left, top, width, height} = this._boundRect;
 
     const mouseXLocal = ((event.clientX - left) / width) * 100;
@@ -183,6 +200,19 @@ export class VscodeSplitLayout extends VscElement {
     this._initPosition();
   }
 
+  private _handleSlotChange() {
+    const nestedLayouts = [
+      ...this._nestedLayoutsAtStart,
+      ...this._nestedLayoutsAtEnd,
+    ];
+
+    nestedLayouts.forEach((e) => {
+      if (e instanceof VscodeSplitLayout) {
+        e.initializeResizeHandler();
+      }
+    });
+  }
+
   render(): TemplateResult {
     const startPaneStyles = styleMap({
       bottom: `${this._startPaneBottom}%`,
@@ -228,10 +258,10 @@ export class VscodeSplitLayout extends VscElement {
 
     return html`
       <div class="start" style="${startPaneStyles}">
-        <slot name="start"></slot>
+        <slot name="start" @slotchange=${this._handleSlotChange}></slot>
       </div>
       <div class="end" style="${endPaneStyles}">
-        <slot name="end"></slot>
+        <slot name="end" @slotchange=${this._handleSlotChange}></slot>
       </div>
       <div class="${handleOverlayClasses}"></div>
       <div