<template>
  <div class="vh-100 d-flex flex-column">
    <div class="flex-fill overflow-auto pt-3 px-3">
      <div class="d-flex my-2">
        <b-avatar variant="primary" text="ZZ" class="my-2 mr-2"> </b-avatar>
        <div class="d-flex flex-column">
          <p class="my-1">Zhao Zuohong</p>
          <b-button variant="primary" class="mb-2 mr-5 text-left"
            >Earth is the third planet from the Sun and the only astronomical
            object known to harbor life.</b-button
          >
        </div>
      </div>
      <div class="d-flex flex-row-reverse my-2">
        <b-avatar variant="success" text="ZZ" class="my-2 ml-2"> </b-avatar>
        <div class="d-flex flex-column">
          <p class="my-1 text-right">Zhao Zuohong</p>
          <b-button variant="success" class="mb-2 ml-5 text-left"
            >It is the densest planet in the Solar System and the largest and
            most massive of the four rocky planets.</b-button
          >
        </div>
      </div>
    </div>
    <b-form class="d-flex m-3">
      <b-form-input class="flex-fill mr-2"> </b-form-input>
      <b-button pill variant="success">Button</b-button>
    </b-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class App extends Vue {}
</script>
