I'm using Vue for the front-end part of the app where I've got <div v-if=""> block like below:

<div class="panel">
  <div class="panel-body">
    <div v-if="this.databaseSyncInProgress" class="col-12 d-flex justify-content-center mt-10">
      <moon-loader :loading="true" :color="'#3e8ef7'"></moon-loader>
      Database sync in progress...
    </div>
    <div v-if="!this.databaseSyncInProgress" class="row">
      <div>
        <h4>Synchronize database</h4>

        <button
        type="button"
        class="btn btn-primary"
        style="float: center"
        @click="syncAll"
        >
        Sync database
      </button>
      </div>
    </div>
  </div>
</div>

<script>

import MoonLoader from 'vue-spinner/src/MoonLoader.vue'

export default {
  name: 'BackboneFetchAll',
  data() {
    return { }
  },
  components: {
    MoonLoader
  },
}
</script>

So basically when this.databaseSyncInProgress will be true the spinner should show up with a text Database sync in progress.... Everything works well but the text Database sync in progress... is not below the spinner but above it on the right side like below :

How do I change the text to be below the spinner?