# Split Layout

[component-header:sl-split-layout]

Split Layout is a component with two content areas and a draggable split handle between them.

```html preview
<sl-split-layout style="height: 16rem;">
  <div slot="start" style="align-items: center;display: flex;justify-content: center;height:100%">Start</div>
  <div slot="end" style="align-items: center;display: flex;justify-content: center;;height:100%">End</div>
</sl-split-layout>
```

```html preview
<sl-split-layout style="height: 40rem;" direction="vertical">
  <div slot="start" style="align-items: center;display: flex;justify-content: center;height:100%">Start</div>
  <div slot="end" style="align-items: center;display: flex;justify-content: center;;height:100%">End</div>
</sl-split-layout>
```