vue js animation/transiion on buttons

I want to show both "User" & "View" buttons. when I click on "User", the button will go below & the "View" button will go up. Is there any way to do this?

I am trying this so many days. The Ui is like this adobeXd

Please see this codepen(https://codepen.io/rezut/pen/YzLprWX) so you get a clear idea about what I want The vue transition part I tried is--

<transition name="button" mode="out-in">
          <div class="accordion-item" :class="{ active: !isActive }" v-if="isActive">
            <h2 class="accordion-header" id="headingOne">
              <button class="d-flex bg-white mx-auto">
                <a @click="isActive = !isActive">User</a>
                
              </button>
            </h2>
          </div>
          <div class="accordion-item" :class="{ active: isActive }" v-else>
            <h2 class="accordion-header" id="headingTwo">
              <button class="d-flex bg-white mx-auto">
                <a 
                @click="isActive = !isActive" >View</a>
                
              </button>
            </h2>
          </div>
  </transition>

in the style--

.active {
    position: relative;
    top:4rem;
}
 .button-enter-from,
button-leave-to {
    /* opacity: 0; */
    transform: translateY(60px);
}
.button-enter-to,
.button-leave-from {
    /* opacity: 1; */
    transform: translateY(0px);
}
.button-enter-active,
.button-leave-active {
    transition: all 1s;
}