Master/Detail

List/master area paired with selected-item details.

html

<div class="md-demo md-demo--side-by-side">
  <ul class="md-demo__list" style="width:140px;">
    <li class="is-selected" style="background:#BFD9F2;">Invoice #1042</li>
    <li>Invoice #1041</li>
    <li>Invoice #1040</li>
    <li>Invoice #1039</li>
  </ul>
  <div class="md-demo__detail">
    <h4 class="md-demo__title">Invoice #1042</h4>
    <p>Billed to Acme Ltd, due in 14 days.</p>
  </div>
</div>
<style>
.md-demo { display: flex; height: 160px; font: 13px system-ui, sans-serif; color: #241430; border: 1px solid #24143022; }
.md-demo--stacked { flex-direction: column; height: auto; }
.md-demo__list { flex: none; box-sizing: border-box; margin: 0; padding: 0; list-style: none; border-right: 1px solid #24143018; overflow-y: auto; background: #FAF7F2; }
.md-demo--stacked .md-demo__list { width: 100% !important; border-right: none; border-bottom: 1px solid #24143018; display: flex; overflow-x: auto; }
.md-demo__list li { padding: 10px 12px; border-bottom: 1px solid #24143012; white-space: nowrap; }
.md-demo__list li.is-selected { font-weight: 700; }
.md-demo__detail { flex: 1; padding: 14px; background: #fff; }
.md-demo__title { margin: 0 0 8px; }
.md-demo__detail p { margin: 0; color: #241430cc; }
</style>

tailwind

<div class="flex h-40 font-sans text-[13px] text-[#241430] border border-[#24143022] md-tw md-tw--side-by-side">
  <ul class="flex-none box-border m-0 p-0 list-none border-r border-[#24143018] overflow-y-auto bg-[#FAF7F2] md-tw__list" style="width:140px;">
    <li class="px-3 py-2.5 border-b border-[#24143012] font-bold whitespace-nowrap" style="background:#BFD9F2;">Invoice #1042</li>
    <li class="px-3 py-2.5 border-b border-[#24143012] whitespace-nowrap">Invoice #1041</li>
    <li class="px-3 py-2.5 border-b border-[#24143012] whitespace-nowrap">Invoice #1040</li>
    <li class="px-3 py-2.5 whitespace-nowrap">Invoice #1039</li>
  </ul>
  <div class="flex-1 p-3.5 bg-white">
    <h4 class="m-0 mb-2">Invoice #1042</h4>
    <p class="m-0 text-[#241430]/80">Billed to Acme Ltd, due in 14 days.</p>
  </div>
</div>
<style>
.md-tw--stacked { flex-direction: column; height: auto; }
.md-tw--stacked .md-tw__list { width: 100% !important; border-right: none; border-bottom: 1px solid #24143018; display: flex; overflow-x: auto; }
</style>

react

export function MasterDetail({
  title = "Invoice #1042",
  layout = "side-by-side",
  masterWidth = 140,
  accent = "#BFD9F2",
}) {
  const stacked = layout === "stacked";
  const items = ["Invoice #1042", "Invoice #1041", "Invoice #1040", "Invoice #1039"];
  return (
    <div style={{ display: "flex", flexDirection: stacked ? "column" : "row", height: stacked ? "auto" : 160, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430", border: "1px solid #24143022" }}>
      <ul style={{
        flex: "none", boxSizing: "border-box", margin: 0, padding: 0, listStyle: "none", background: "#FAF7F2",
        width: stacked ? "100%" : masterWidth, display: stacked ? "flex" : "block",
        overflowX: stacked ? "auto" : "visible", overflowY: stacked ? "visible" : "auto",
        borderRight: stacked ? "none" : "1px solid #24143018", borderBottom: stacked ? "1px solid #24143018" : "none",
      }}>
        {items.map((label, i) => (
          <li key={label} style={{ padding: "10px 12px", borderBottom: "1px solid #24143012", whiteSpace: "nowrap", background: i === 0 ? accent : "transparent", fontWeight: i === 0 ? 700 : 400 }}>{label}</li>
        ))}
      </ul>
      <div style={{ flex: 1, padding: 14, background: "#fff" }}>
        <h4 style={{ margin: "0 0 8px" }}>{title}</h4>
        <p style={{ margin: 0, color: "#241430cc" }}>Billed to Acme Ltd, due in 14 days.</p>
      </div>
    </div>
  );
}