.sb-rsz {
display: flex;
min-height: 480px;
font-family: 'Courier New', 'Courier', monospace;
background: #fff;
color: #000;
border-radius: 0; overflow: hidden;
border: 3px solid #000;
}
.sb-rsz-side {
flex-shrink: 0;
width: 240px; min-width: 180px; max-width: 380px;
background: #fff;
border-right: 3px solid #000;
padding: 16px 14px;
overflow: auto;
resize: horizontal;
}
.sb-rsz-side header { padding-bottom: 12px; border-bottom: 2px solid #000; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.sb-rsz-bar { font-size: 13px; font-weight: 700; color: #000; letter-spacing: 0.04em; }
.sb-rsz-side header strong { font-size: 16px; font-weight: 700; letter-spacing: 0.08em; color: #000; }
.sb-rsz-side h3 { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: #000; }
.sb-rsz-tree { list-style: none; margin: 0 0 16px; padding: 0; font-size: 13px; color: #000; display: flex; flex-direction: column; gap: 3px; }
.sb-rsz-tree li { padding: 3px 0; cursor: pointer; transition: background 0.1s; }
.sb-rsz-tree li:hover { background: #000; color: #fff; }
.sb-rsz-tree li.folder::before { content: '> '; }
.sb-rsz-tree li:not(.folder)::before { content: '· '; }
.sb-rsz-tree li.indent { padding-left: 18px; }
.sb-rsz-tree li.indent2 { padding-left: 36px; }
.sb-rsz-tree li.active { background: #000; color: #fff; }
.sb-rsz-tree li.active::before { content: '* '; color: #ff0000; }
.sb-rsz-hint { margin: 0; padding: 8px 6px; font-size: 11px; font-weight: 700; color: #fff; background: #000; letter-spacing: 0.04em; text-align: center; animation: sb-rsz-flash 1.4s steps(1) infinite; }
@keyframes sb-rsz-flash {
0%, 49% { background: #000; color: #fff; }
50%, 100% { background: #ff0000; color: #000; }
}
@media (prefers-reduced-motion: reduce) { .sb-rsz-hint { animation: none; } }
.sb-rsz-main { flex: 1; padding: 24px 28px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sb-rsz-bar2 { display: flex; justify-content: space-between; padding: 6px 12px; background: #000; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.sb-rsz-main h2 { margin: 0; font-size: clamp(40px, 6vw, 76px); font-weight: 700; line-height: 0.92; color: #000; letter-spacing: -0.02em; }
.sb-rsz-main p { margin: 0; font-size: 13.5px; color: #000; line-height: 1.7; max-width: 540px; font-weight: 700; }
.sb-rsz-main code { font-family: inherit; font-size: 13px; color: #fff; background: #000; padding: 1px 6px; border-radius: 0; font-weight: 700; }
.sb-rsz-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; max-width: 480px; border: 2px solid #000; }
.sb-rsz-cell { padding: 12px; font-size: 12px; font-weight: 700; text-align: center; border-right: 2px solid #000; border-bottom: 2px solid #000; }
.sb-rsz-cell:nth-child(6n) { border-right: 0; }
.sb-rsz-cell:nth-last-child(-n+6) { border-bottom: 0; }
.sb-rsz-cell.solid { background: #000; color: #fff; }
.sb-rsz-cell.solid::after { content: ' ✦'; } <div class="sb-rsz">
<aside class="sb-rsz-side" aria-label="Primary">
<header>
<span class="sb-rsz-bar" aria-hidden="true">[ === ]</span>
<strong>FILE.SYS</strong>
</header>
<h3>// directory</h3>
<ul class="sb-rsz-tree">
<li class="folder">src/</li>
<li class="indent folder">components/</li>
<li class="indent indent2">Button.tsx</li>
<li class="indent indent2">Card.tsx</li>
<li class="indent indent2 active">Modal.tsx</li>
<li class="indent folder">pages/</li>
<li class="indent indent2">index.tsx</li>
<li class="indent indent2">about.tsx</li>
<li>package.json</li>
<li>tsconfig.json</li>
</ul>
<p class="sb-rsz-hint">→→→ DRAG_RIGHT_EDGE →→→</p>
</aside>
<main class="sb-rsz-main">
<header class="sb-rsz-bar2">
<span>STATUS: 200_OK</span>
<span>17:42:08 GMT</span>
</header>
<h2>RESIZE_ME.</h2>
<p>PURE CSS · <code>resize: horizontal</code> · NO JS · NO LIBRARY · NO FRAMEWORK · ONE LINE OF CSS · BROWSER HANDLES THE DRAG · LAYOUT ADJUSTS NATURALLY · WORKS EVERYWHERE · 1996 ENERGY 2026 BROWSERS.</p>
<div class="sb-rsz-grid">
<div class="sb-rsz-cell">[01]</div>
<div class="sb-rsz-cell">[02]</div>
<div class="sb-rsz-cell">[03]</div>
<div class="sb-rsz-cell solid">[04]</div>
<div class="sb-rsz-cell">[05]</div>
<div class="sb-rsz-cell">[06]</div>
</div>
</main>
</div> Live preview Edit any tab — preview updates live Ready