CSS Reveal Left to Right - minimum width on content inside

Question

Apologies for the poor title - really don't know how to word the question.

Basically I'm creating stream alerts using Vue2 and TailwindCSS 3, and I have a left-to-right reveal transition going on. In this video, you'll see that when the 'username' is 'Anonymous' things work perfectly as that exceeds the minimum width of 1/3, but when it's Unb, things shift along as the width is increased by the transition.

The relevant HTML:

<div class="flex justify-center" :class="$route?.query?.width_guideline === 'true' ? 'mt-2' : 'mt-10'">
   <div class="flex flex-col text-center tracking-widest relative mb-10 min-w-1/3">
      <div class="event-username z-40 flex items-center space-x-2 overflow-hidden bg-primary border-primary-600 border-2 rounded-t-lg">
          <div class="flex items-center text-center space-x-2 px-2 mx-auto">
              <img class="h-12" alt="RazedGG Logo" src="https://not-the-real-link.jpg">
              <span class="text-white text-2xl font-extrabold mx-2">
                  <slot name="usernameOrTitle">Anonymous</slot>
              </span>
              <font-awesome-icon class="h-8 text-white" :icon="icon" />
          </div>
        </div>

        <p v-if="this.$slots.eventAction" class="event-type absolute w-full bottom-0 bg-white text-xl font-bold border-primary-600 border-b-2 border-l-2 border-r-2">
            <slot name="eventAction"></slot>
        </p>

        <div v-if="this.$slots.detailedEventAction" class="absolute flex items-center text-center justify-center w-full bottom-0 bg-white text-xl font-bold border-primary-600 border-b-2 border-l-2 border-r-2 overflow-hidden detailed-event-type">
         <p class="justify-center">
            <slot name="detailedEventAction"></slot>
         </p>
         <div v-if="this.$slots.eventActionDetails" class="absolute h-full event-type-details bg-gray-600 text-white flex justify-around overflow-hidden items-center">
             <slot name="eventActionDetails"></slot>
         </div>
     </div>
   </div>
</div>

The Style:

<style scoped>
.event-username {
    animation: bg-reveal-right 9s ease-in forwards;
    white-space: nowrap;
}
.event-type {
    animation: slide-in-slide-out 9s ease-in forwards;
    white-space: nowrap;
}
.detailed-event-type {
    animation: slide-in-slide-out 9s ease-in forwards;
    white-space: nowrap;
}
.event-type-details {
    animation: bg-reveal-left 9s ease-in forwards;
    white-space: nowrap;

}
.event-type-details p {
    animation:fade-in-late 9s ease-in forwards;
    color: white;
}
.event-message {
    animation: fade-in-fade-out 9s ease-in forwards;
}

@keyframes bg-reveal-right {
    0% { width: 0%; }
    15% { width: 100%; }
    90% { width: 100%; opacity: 1;}
    95% { opacity: 1; }
    100% { width: 0%; opacity: 0;}
}
@keyframes bg-reveal-left {
    0% { width: 0%; opacity: 0;}
    40% { width: 0%; opacity: 0;}
    50% { width: 100%; opacity: 1; }
    90% { width: 100%; opacity: 1;}
    95% { opacity: 1; }
    100% { opacity: 0;}
}
@keyframes slide-in-slide-out {
    0% { transform:translateY(0); opacity:0;}
    15% { transform:translateY(0); opacity: 0;}
    20% { transform:translateY(100%); opacity: 1; animation-timing-function: ease-in-out; }
    80% { transform:translateY(100%); opacity: 1; animation-timing-function: ease-in-out; }
    85% { opacity: 1; }
    90% { transform:translateY(0%); opacity: 0; animation-timing-function: ease-in-out; }
    100% { transform:translateY(0%); opacity: 0; animation-timing-function: ease-in-out; }
}
@keyframes fade-in-fade-out {
    0%    { opacity: 0; }
    15%   { opacity: 0; }
    25%   { opacity: 1; }
    90%   { opacity: 1; }
    100%  { opacity: 0; }
}
@keyframes fade-in-late {
    0%    { opacity: 0; }
    50%   { opacity: 0; }
    55%   { opacity: 1; }
    90%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { opacity: 0; }
}
</style>

Any suggestions would be greatly appreciated

Cheers!