.items-space-between

      <div class="items-space-between">
        <!-- START form-item--toggle component -->
        <div class="v5-form-item v5-form-item--toggle">
          <input type="checkbox" name="idf2a37e471c" id="idf2a37e471c">
          <label for="idf2a37e471c">
          <span>All</span>
          </label>
        </div>
        <!-- END form-item--toggle component -->
        <div class="v5-form-item v5-form-item--checkbox">
          <input type="checkbox" name="id42db8c7b6f" id="id42db8c7b6f" value="id42db8c7b6f">
          <label for="id42db8c7b6f">Email</label>
        </div>
        <div class="v5-form-item v5-form-item--checkbox">
          <input type="checkbox" name="id7d85d96df4" id="id7d85d96df4" value="id7d85d96df4">
          <label for="id7d85d96df4">Post</label>
        </div>
        <div class="v5-form-item v5-form-item--checkbox">
          <input type="checkbox" name="id140282ef00" id="id140282ef00" value="id140282ef00">
          <label for="id140282ef00">SMS</label>
        </div>
      </div>

.self-inline-end and .self-inline-end--from-small

Used on an item to line it up at the inline-end.

<button class="button button--link self-inline-end self-inline-end--from-small">Edit details</button>

.items-inline-end and .items-inline-end--from-small

Used on a container to line up its items at the inline-end.

In the following examples, the personal ID section (outlined in pink) has .items-inline-end applied so both its title and the the number are aligned to its right at all breakpoints.
The bottom example only does this from the small breakpoint up.

<div class="items-inline-end items-inline-end--from-small">
  <h2 class="h6">Your Personal ID number</h2>
  <p class="impact impact--light impact--small">1160007564</p>
</div>