Controlling position of tabs in layout toolbar

[dsl101]

Is it possible to get tabs to float left next to a toolbar title, with nothing but empty space to the right? Currently, the code below puts the title top left, and the tabs top right, which looks very odd on a wide desktop window. I tried applying the positioning classes to the tabs, but couldn’t get anything to change.

Supplementary question - is it possible to make the q-toolbar-title clickable like a tab to get back to the ‘home’ page ('/')? I tried adding a click handler to it, but nothing seems to happen, and the mouse pointer would obviously need updating too.

<template>
  <div>
    <q-layout>
      <div slot="header" class="toolbar">
        <q-toolbar-title>Page Title</q-toolbar-title>
        <q-tabs>
          <q-tab route="/route1">
            First Tab
          </q-tab>
          <q-tab route="/route2">
            Second Tab
          </q-tab>
        </q-tabs>
        <div></div>
      </div>
      <router-view></router-view>
    </q-layout>
  </div>
</template>

[rstoenescu]

Use CSS helper classes from here: http://quasar-framework.org/api/css-grid-layout.html
to add the “space” you want, add an empty <div class="auto"></div> between title and tabs.