Basically, I'm having cards that have a height set by the flex behaviour. I'd like to add a button from the side that is only shown when the card is hovered so the button would come out from the right side of the container with a transition and start expanding and pushing all other content to the left until it finishes expanding. Therefore, I've looked for hours and I tried many things out and I couldn't find a solution. Could someone please help me out on this? here is my code, I'm using Bootstrap 5. Here is the UI I created

Here is my code . I'm using VueJS and my data is coming from an API.

<template>
<div class="d-flex col-12 flex-column bd-highlight mb-3">
  <div class=" d-flex border border-dark col-12 flex-column" v-for="(question,index) in questions" :key="question +  index">
    <div class="d-flex col-12 justify-content-between">
      <div>
        <span class="text-wrap text-break">{{question.description}}</span>
      </div>
      <div class="d-flex">
      <span :class="question.complexity.toLowerCase() === 'easy' ? 'badge bg-success align-self-start' : question.complexity.toLowerCase() === 'medium' ? 'badge bg-warning  align-self-start' : 'badge bg-danger align-self-start' ">{{question.complexity}}</span>
      </div>
    </div>
    <div class="d-flex flex-wrap">
    <div class="p-2" v-for="(tag,index1) in question.tags" :key ="tag + index1">
      <span class="badge bg-dark text-white"><i :class="'devicon-'+tag.nom.toLowerCase()+'-plain'"></i>  {{tag.nom}}</span>
    </div>
    <div  class="align-items-center d-flex w-100 justify-content-end">
      <span> 
      <i class="fas fa-stopwatch"></i> {{question.duree}} secs </span></div>
    </div>
  </div>
</div>
</template>

Here is my UI

Expected Result ( Buttons should be with the same size )