Dropdowns

<div x-data="{ open: false }" class="mb-3">
  <button
    class="btn btn-primary"
    @click="open = !open"
    :aria-expanded="open ? 'true' : 'false'"
  >Click me <!-- icon chevron down -->
  </button>
  <div
    class="absolute bs b-thin rounded-sm p-block bg-color-background"
    x-show="open"
    @click.away="open = false"
  >Dropdown content</div>
</div>

1. Wrap the whole component in an element with e.g. .flex.flex-end or .flex.flex-space-between that pushes it to the right
2. Add .relative to the dropdown component wrapper itself
3. Add .absolute.right to the dropdown content element
4. Right aligned dropdown content panels also require a min-width, or they will be constrained to the width of their dropdown control (the button).

<div class="flex flex-end">
  <div
    class="relative"
    x-data="{ open: false }"
  >
    <button
      class="btn btn-primary"
      @click="open = !open"
      :aria-expanded="open ? 'true' : 'false'"
    >Click-me too <!-- icon chevron down -->
    </button>
    <div
      class="absolute right bs b-thin rounded-sm p-block bg-color-background"
      x-show="open"
      @click.away="open = false"
      style="min-width: 12rem"
    >Dropdown content</div>
  </div>
</div>