Split Screen with Gap Decorations

.flex-split {
  gap: 1px;
  column-rule-width: 2px;
  column-rule-style: dashed, solid;
  column-rule-color: #d4d0c8;
  row-rule-width: 2px;
  row-rule-style: dashed, solid;
  row-rule-color: #d4d0c8;
}
@media (max-width: 600px) {
  .flex-split { flex-direction: column; }
}

Explorer

style.css
index.html
app.js
utils.ts

style.css

.container {
  display: flex;
  gap: 1px;
  rule: 2px solid #ccc;
  border-radius: 12px;
}

Preview