<main>
  <div class="wrapper">
    <article class="flow">
      <h1>Extrinsic sizing vs intrinsic sizing</h1>
      <figure class="callout">
        <p>
          Notice that when the box is using <strong>extrinsic sizing</strong>, there’s
          a limit of how much content you can add before it overflows out of the box’s
          bounds. This makes the word, “awesome”, overflow.
        </p>
      </figure>
      <label class="toggle" for="intrinsic-switch">
        <span class="toggle__label">Turn on intrinsic sizing</span>
        <input type="checkbox" role="switch" class="toggle__element" id="intrinsic-switch" />
        <div class="toggle__decor" aria-hidden="true">
          <div class="toggle__thumb"></div>
        </div>
      </label>
      <p class="awesome" data-element="awesome">CSS is awesome</p>
    </article>
  </div>
</main>

.awesome {
  text-transform: uppercase;
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  border: 5px solid;
  padding: 2rem;

  /* The important extrinsic width */
  width: 320px;
}

.awesome[data-sizing="intrinsic"] {
  width: min-content;
}

/*


Presentational styles 
*/
.awesome {
  --flow-space: 2rem;
}

const awesome = document.querySelector('[data-element="awesome"]');
const intrinsicSwitch = document.querySelector("#intrinsic-switch");

// Set sizing attribute based on switch
intrinsicSwitch.addEventListener("change", () => {
  awesome.setAttribute(
    "data-sizing",
    intrinsicSwitch.checked ? "intrinsic" : "extrinsic"
  );
});