Две панели с перетаскиваемым разделителем: пользователь сам решает, сколько места дать списку, а сколько — деталям (файлы и предпросмотр, код и результат). Используйте в двухпанельных интерфейсах, где удобство зависит от пропорций.

Технические детали: резиновый сплит, модель — процент первой панели 0–100 (удобно сохранять в настройках, не зависит от пиксельной ширины контейнера); границы min/max (10–90) нормализуют внешнюю модель, чтобы flex-basis и aria-valuenow не ломались. Ориентация orientation: horizontal — слева/справа, vertical — сверху/низу (flex-direction). Слоты first/second. Перетаскивание — Pointer Events с setPointerCapture (курсор может уходить за девайдер и за окно); на тач-устройствах touch-action:none исключает скролл страницы. С клавиатуры: стрелки — шаг 2%, Home/End — границы (preventDefault, чтобы стрелки не скроллили документ); focus-visible — outline. Контент панелей прокручивается внутри (overflow:auto обнуляет automatic minimum size флекс-элемента), hover девайдера — только на устройствах с курсором.