<!-- More details in this article:
https://dev.to/5t3ph/guide-to-css-units-for-relational-spacing-1mj5 -->

<h2>Buttons - <code>min-width: 10ch</code></h2>
<button role="button">ABC</button> <button role="button">DEFGHI</button>

<h2>Flexbox Albatross - <code>min-width: 60ch</code></h2>
<p><em>Open full pen to experiment via responsive resizing</em></p>
<div class="flexbox-container">
	<p>Brownie macaroon dessert gummi bears. Bonbon chocolate cake soufflé chocolate macaroon. Chocolate cake muffin cheesecake bonbon chupa chups sweet roll marzipan.</p>
	<p>Lemon drops sweet roll soufflé. Macaroon tiramisu marzipan dragée cake pudding gummies topping. Chocolate bar lemon drops cookie. Oat cake cupcake topping bonbon cheesecake danish powder.</p>
	<p>Donut topping bear claw. Marshmallow gummi bears croissant chocolate bar powder dessert cotton candy candy. Cookie carrot cake lemon drops chocolate cake.</p>
</div>

<h2>Grid - <code>minmax: (auto, 60ch)</code></h2>
<p><em>Open full pen to experiment via responsive resizing</em></p>
<div class="grid-container">
	<p>Brownie macaroon dessert gummi bears. Bonbon chocolate cake soufflé chocolate macaroon. Chocolate cake muffin cheesecake bonbon chupa chups sweet roll marzipan.</p>
	<p>Lemon drops sweet roll soufflé. Macaroon tiramisu marzipan dragée cake pudding gummies topping. Chocolate bar lemon drops cookie. Oat cake cupcake topping bonbon cheesecake danish powder.</p>
	<p>Donut topping bear claw. Marshmallow gummi bears croissant chocolate bar powder dessert cotton candy candy. Cookie carrot cake lemon drops chocolate cake.</p>
</div>

body {
	padding: 2rem;
}

button {
	// ch spacing
	min-width: 10ch;
		
	font-size: 1.25rem;
	color: #fff;
	background-color: rebeccapurple;
	border: 2px solid rebeccapurple;
	border-radius: .25em;
	cursor: pointer;
}

.flexbox-container {
  display: flex;
  flex-wrap: wrap;
  --margin: 1rem;
  --modifier: calc(60ch - 100%);
  margin: calc(var(--margin) * -1);
	
	> * {
	  flex-grow: 1;
	  flex-basis: calc(var(--modifier) * 999);
	  margin: var(--margin);
	}
}

.grid-container {
	// Roughly equivalent breakpoint to flexbox version
	@media(min-width: 70ch) {
		display: grid;
		grid-template-columns: repeat(3, minmax(auto, 60ch));
		grid-gap: 2rem;
	}
}