/* Positions two elements next to each other according to available space:
* 1) Lots of space: side by side, fixed width sidebar, flexible non-sidebar.
* 2) Not enough space: both elements laid out vertically at 100% width.
* Sidebar width is determined by width of the element itself (or its children)
*
* Customisation Options:
*
* Gap Spacing: Set "--space" (see spacing.css)
* Min Size of the "not sidebar": Override "min-inline-size"
* Reverse element order: Use "with-sidebar-reversed"
*
*/

.with-sidebar, .with-sidebar-reversed {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space, var(--space-m));
}

.with-sidebar > :first-child,
.with-sidebar-reversed > :last-child  {
  flex-grow: 1;
}

.with-sidebar > :last-child,
.with-sidebar-reversed > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 35%;
}