I'm making a three-column layout in React for a shopping list app. The columns are "item search", "shopping list", and "item details". Each column has a header div containing controls specific to that column, and a contents div beneath:
Codepen link: https://codepen.io/commscheck/pen/zYyqRmP
My original plan was to have a component for each column, to nicely encapsulate the logic of each. Then the top-level app would look something like:
<RootLayout>
<ItemSearchColumn onItemAdded={...} />
<ShoppingListColumn items={...} onItemRemoved={...} onItemSelected={...} />
<ItemDetailsColumn selectedItem={...} />
</RootLayout>
However, I want the top edge of the three bottom divs to line up.
I could use CSS grid to achieve this layout like I've done in the codepen above, but the RootLayout component has no visibility of each column component's children.
Is there a way I can achieve this layout, without needing to shift each column's business logic up into the parent "layout" component?
