Básicamente, tengo tarjetas que tienen una altura establecida por el comportamiento de flexión. Me gustaría agregar un botón del lado que solo se muestra cuando se pasa el cursor sobre la tarjeta para que el botón salga del lado derecho del contenedor con una transición y comience a expandirse y empujar el resto del contenido hacia la izquierda hasta que termine. en expansión. Por lo tanto, he buscado durante horas y he probado muchas cosas y no he podido encontrar una solución. ¿Podría alguien ayudarme con esto? aquí está mi código, estoy usando Bootstrap 5 . Aquí está la interfaz de usuario que creé

Aquí está mi código. Estoy usando VueJS y mis datos provienen de una 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>

Aquí está mi interfaz de usuario

Resultado esperado (los botones deben tener el mismo tamaño)