Как выровнять текст по левому и правому краям?

У меня Vue 2, я использую Vuetify 2.2.11. У меня есть два текста, которые я хотел бы поместить в панель v-app, один должен быть слева, а другой справа. Как мне этого добиться?

Мой текущий код:

<template>
  <v-app>
    <v-navigation-drawer app permanent color = "#048ccc" clipped>
        <!-- Removed to simplify -->
    </v-navigation-drawer>

    <v-app-bar app clipped-left color = "#005f9b" hide-on-scroll>
      LeftText-
      <div style = "text-align:right">RightText</div>
    </v-app-bar>

    <div>
      <v-main>
        <div style = "margin:1em">
          <router-view :key = "$route.fullPath"></router-view>
        </div>
      </v-main>
    </div>
  </v-app>
</template>

Чего я хочу достичь:

Как мне это сделать?