<main>
      <div class="wrapper">
        <article class="flow">
          <h1>Flow relative margin</h1>
          <figure class="callout">
            <p>
              Toggle the writing mode to see how <code>margin-top</code> and
              <code>margin-block-start</code> respond. The blue part in each box shows the
              margin.
            </p>
          </figure>
          <label class="toggle" for="toggle-element">
            <span class="toggle__label">Toggle writing mode</span>
            <input
              type="checkbox"
              role="switch"
              class="toggle__element"
              id="toggle-element"
            />
            <div class="toggle__decor" aria-hidden="true">
              <div class="toggle__thumb"></div>
            </div>
          </label>
          <div class="sample">
            <div>
              <p>I have <code>margin-top</code>.</p>
            </div>
            <div>
              <p>I have <code>margin-block-start</code>.</p>
            </div>
          </div>
        </article>
      </div>
    </main>

:root {
  --writing-mode: horizontal-tb;
}

.sample {
  writing-mode: var(--writing-mode);
}

.sample > * {
  border: 1px solid var(--color-primary);
  background: var(--color-primary-x-light);
  max-width: 20rem;
}

.sample > * + * {
  margin-block-start: 1em;
}

.sample p {
  padding: 1em;
  background: white;
}

.sample div:nth-child(1) p {
  margin-top: 1em;
}

.sample div:nth-child(2) p {
  margin-block-start: 1em;
}

const toggle = document.querySelector('#toggle-element');

toggle.addEventListener('change', evt => {
  document.documentElement.style.setProperty(
    '--writing-mode',
    evt.target.checked ? 'vertical-rl' : 'initial'
  );
});