How do I make a text at both left and right align?

I'm on Vue 2, I'm using Vuetify 2.2.11. I have two texts that I would like to put inside the v-app-bar, one should be on the left and the other on the right. How do I achieve that?

My current code:

<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>

What I want to achieve:

How do I do this?