CSS Grid split toolbar

css-grid-toolbar.css

/* some buttons align left, others right, adjusts dynamically! */

.themer--top-edge-container {
  display: grid;
  position: fixed;
  top: var(--ch-spacing);
  right: var(--ch-spacing);
  left: var(--ch-spacing);
  z-index: var(--ch-actions-z-index);
  grid-template-columns: auto auto;
}

.themer--top-edge-width-controls {
  justify-self: start;
}

.themer--top-edge-pane-controls {
  justify-self: end;
}

css-grid-toolbar.hbs

<header class="themer--top-edge-container">
  <div class="themer--top-edge-width-controls">
    <button 
      class="ch-button ch-button--icon responsive {{if this.cssModeToggle.isResponsive "selected"}}"
      {{on "click" this.cssModeToggle.useResponsiveWidth}}
      aria-label="Show the card in responsive size"
      data-test-responsive-btn
    >
    </button>

    <button 
      class="ch-button ch-button--icon full-width {{if this.cssModeToggle.isResponsive "" "selected"}}"
      {{on "click" this.cssModeToggle.useFullWidth}}
      aria-label="Show the card in full width size"
      data-test-full-width-btn
    >
    </button>
  </div>

  <div class="themer--top-edge-pane-controls">
    {{#if this.cssModeToggle.visible}}
      <button 
        class="ch-button ch-button--icon eye-on"
        aria-label="Hide the CSS editor"
        {{on "click" this.cssModeToggle.hideEditor}}
        data-test-hide-editor-btn
      >
      </button>
    {{else}}
      <button 
        class="ch-button ch-button--icon eye-off"
        aria-label="Show the CSS editor"
        {{on "click" this.cssModeToggle.showEditor}}
        data-test-show-editor-btn
      >
      </button>
    {{/if}}

    <button 
      class="ch-button ch-button--icon dock-bottom {{if (eq this.cssModeToggle.dockLocation "bottom") "selected"}}"
      {{on "click" this.cssModeToggle.dockBottom}}
      aria-label="Dock the CSS editor to the bottom"
      data-test-dock-bottom
    >
    </button>

    <button 
      class="ch-button ch-button--icon dock-right {{if (eq this.cssModeToggle.dockLocation "right") "selected"}}"
      {{on "click" this.cssModeToggle.dockRight}}
      aria-label="Dock the CSS editor to the right"
      data-test-dock-right
    >
    </button>
    <button {{on "click" @closeEditor}}
      class="ch-button close-editor-btn"
      data-test-close-editor
    >
      Close Editor
    </button>
  </div>
</header>