Basic Horizontal Split

Left Panel

Right Panel

<div class="uk-resize-demo">
    <div class="uk-resize-panel">Left Panel</div>
    <div class="uk-resize-handle"><i class="fas fa-grip-lines-vertical"></i></div>
    <div class="uk-resize-panel">Right Panel</div>
</div>

<style>
    .uk-resize-demo {
        display: flex; height: 160px; border: 1px solid #cbd5e1; border-radius: 0.5rem; overflow: hidden;
    }
    .uk-resize-panel {
        flex: 1; padding: 1rem; background: #f8fafc;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.9rem; color: #64748b; font-weight: 500;
    }
    .uk-resize-handle {
        width: 12px; background: #e2e8f0; cursor: col-resize;
        display: flex; align-items: center; justify-content: center;
        color: #94a3b8; font-size: 0.6rem; transition: background 0.15s;
    }
    .uk-resize-handle:hover { background: #cbd5e1; }
</style>

Vertical Split

Top Panel

Bottom Panel

<div class="uk-resize-demo-v">
    <div class="uk-resize-panel-v">Top Panel</div>
    <div class="uk-resize-handle-h"><i class="fas fa-grip-lines"></i></div>
    <div class="uk-resize-panel-v">Bottom Panel</div>
</div>

<style>
    .uk-resize-demo-v {
        display: flex; flex-direction: column; height: 240px;
        border: 1px solid #cbd5e1; border-radius: 0.5rem; overflow: hidden;
    }
    .uk-resize-panel-v {
        flex: 1; padding: 1rem; background: #f8fafc;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.9rem; color: #64748b; font-weight: 500;
    }
    .uk-resize-handle-h {
        height: 12px; background: #e2e8f0; cursor: row-resize;
        display: flex; align-items: center; justify-content: center;
        color: #94a3b8; font-size: 0.6rem; transition: background 0.15s;
    }
    .uk-resize-handle-h:hover { background: #cbd5e1; }
</style>

Sidebar Layout

<div class="uk-resize-sidebar">
    <div class="uk-sidebar-panel">Sidebar</div>
    <div class="uk-resize-handle"></div>
    <div class="uk-main-panel">Main Content Area</div>
</div>

<style>
    .uk-resize-sidebar {
        display: flex; height: 200px; border: 1px solid #cbd5e1; border-radius: 0.5rem; overflow: hidden;
    }
    .uk-sidebar-panel {
        width: 120px; background: #f8fafc; padding: 1rem;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        font-size: 0.85rem; color: #64748b; border-right: 1px solid #cbd5e1;
    }
    .uk-main-panel {
        flex: 1; background: #fff; padding: 1rem;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.9rem; color: #0f172a; font-weight: 500;
    }
    .uk-resize-handle {
        width: 6px; background: #e2e8f0; cursor: col-resize; transition: background 0.15s;
    }
    .uk-resize-handle:hover { background: #1e3a8a; }
</style>

Code / Preview Split

                        <div class="card">

                          <h1>Hello</h1>

                        </div>

Hello

<div class="uk-resize-code">
    <div class="uk-code-panel">
        <div style="font-family: monospace;">&lt;div class="card"&gt;...</div>
    </div>
    <div class="uk-resize-handle"></div>
    <div class="uk-preview-panel">
        <h1>Hello</h1>
    </div>
</div>

<style>
    .uk-resize-code {
        display: flex; height: 180px; border: 1px solid #cbd5e1; border-radius: 0.5rem; overflow: hidden;
    }
    .uk-code-panel {
        flex: 1; background: #0f172a; padding: 1rem; overflow: auto;
    }
    .uk-preview-panel {
        flex: 1; background: #f8fafc; padding: 1rem;
        display: flex; align-items: center; justify-content: center;
    }
    .uk-resize-handle {
        width: 8px; background: #e2e8f0; cursor: col-resize; transition: background 0.15s;
    }
    .uk-resize-handle:hover { background: #1e3a8a; }
</style>

Three Panels

Panel 1

Panel 2

Panel 3

<div class="uk-resize-multi">
    <div class="uk-resize-panel">Panel 1</div>
    <div class="uk-resize-handle"></div>
    <div class="uk-resize-panel">Panel 2</div>
    <div class="uk-resize-handle"></div>
    <div class="uk-resize-panel">Panel 3</div>
</div>

<style>
    .uk-resize-multi {
        display: flex; height: 160px; border: 1px solid #cbd5e1; border-radius: 0.5rem; overflow: hidden;
    }
    .uk-resize-panel {
        flex: 1; padding: 1rem; background: #fff;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.9rem; color: #64748b; font-weight: 500;
    }
    .uk-resize-panel:not(:last-child) { border-right: 1px solid #e2e8f0; }
    .uk-resize-handle {
        width: 8px; background: #e2e8f0; cursor: col-resize; transition: background 0.15s;
    }
    .uk-resize-handle:hover { background: #1e3a8a; }
</style>

Resizable Panels

Hello