// src/App.jsx

function TwoColumn({ left, right }) {
  return (
    <div style={{ display: "flex", gap: "20px" }}>
      <div style={{ flex: 1 }}>{left}</div>
      <div style={{ flex: 1 }}>{right}</div>
    </div>
  );
}

function App() {
  return (
    <TwoColumn
      left={<p>This is the sidebar content.</p>}
      right={
        <div>
          <h2>Main content</h2>
          <p>This is the main column.</p>
        </div>
      }
    />
  );
}

export default App;

/*
  Notes:
  - left and right are passed as JSX values, just like any other
    prop — wrapped in curly braces, the same as passing a number or
    a string would be.
  - TwoColumn places each one in its own div without needing to know
    anything about what's actually inside either one.
*/