Split Pane

Resizable two-panel layout.

html

<div class="split-demo split-demo--vertical">
  <div class="split-demo__pane" style="flex-basis:50%;">Editor</div>
  <div class="split-demo__handle" style="background:#241430;"></div>
  <div class="split-demo__pane" style="flex-basis:calc(100% - 50%);">Preview</div>
</div>
<style>
.split-demo { display: flex; height: 140px; font: 13px system-ui, sans-serif; color: #241430; border: 1px solid #24143022; }
.split-demo--horizontal { flex-direction: column; }
.split-demo__pane { box-sizing: border-box; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #FAF7F2; }
.split-demo__pane:first-child { background: #fff; }
.split-demo__handle { flex: none; position: relative; }
.split-demo--vertical .split-demo__handle { width: 4px; cursor: col-resize; }
.split-demo--horizontal .split-demo__handle { height: 4px; cursor: row-resize; }
.split-demo__handle:hover { opacity: .8; }
</style>

tailwind

<div class="flex h-[140px] font-sans text-[13px] text-[#241430] border border-[#24143022] split-tw split-tw--vertical">
  <div class="box-border flex-shrink-0 overflow-hidden flex items-center justify-center bg-white" style="flex-basis:50%;">Editor</div>
  <div class="flex-none relative hover:opacity-80 split-tw__handle" style="background:#241430;"></div>
  <div class="box-border flex-shrink-0 overflow-hidden flex items-center justify-center bg-[#FAF7F2]" style="flex-basis:calc(100% - 50%);">Preview</div>
</div>
<style>
.split-tw--horizontal { flex-direction: column; }
.split-tw--vertical .split-tw__handle { width: 4px; cursor: col-resize; }
.split-tw--horizontal .split-tw__handle { height: 4px; cursor: row-resize; }
</style>

react

export function SplitPane({
  leftLabel = "Editor",
  rightLabel = "Preview",
  split = 50,
  orientation = "vertical",
  accent = "#241430",
}) {
  const vertical = orientation === "vertical";
  return (
    <div style={{ display: "flex", flexDirection: vertical ? "row" : "column", height: 140, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430", border: "1px solid #24143022" }}>
      <div style={{ boxSizing: "border-box", flexShrink: 0, flexBasis: `${split}%`, overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center", background: "#fff" }}>{leftLabel}</div>
      <div style={{ flex: "none", position: "relative", background: accent, width: vertical ? 4 : "auto", height: vertical ? "auto" : 4, cursor: vertical ? "col-resize" : "row-resize" }} />
      <div style={{ boxSizing: "border-box", flexShrink: 0, flexBasis: `calc(100% - ${split}%)`, overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center", background: "#FAF7F2" }}>{rightLabel}</div>
    </div>
  );
}