How to make parent width fit content when a child has a negative transform translateX?

Question

This is an example snippet showcasing what I'm trying to achieve. (please make sure to scroll down, as the 2nd example might be hidden by tailwind warning)

In the 2nd example, as you can see, the parent box width remains the same and doesn't shrink down to fit the content.

I believe absolute positioning is probably the best to achieve the badge position that I want, however, using absolute positioning will have a similar issue of the parent not adjusting to content size.

/*
 * These styles are just a workaround to fix tailwind/daisyui styles
 *   as for some reason daisyui doesn't override tailwind when using CDN.
 */
.img-link {
  padding:0!important;
  border:none!important;
}

<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet"/>

<h1 class="mb-2">Original box</h1>
<div class="inline-block bg-rose-400">
  <a class="btn btn-ghost normal-case text-l p-0 border-0 img-link" href="/">
    <img src="https://picsum.photos/200" class="h-full" alt="madlabz - Wild Rift Builds" />
  </a>
  <span class="badge">badge</span>
</div>

<h1 class="mt-6 mb-2">Badge has `tranform: translateX(-50%)`</h1>
<div class="inline-block bg-rose-400">
  <a class="btn btn-ghost normal-case text-l p-0 border-0 img-link" href="/">
    <img src="https://picsum.photos/200" class="h-full" alt="madlabz - Wild Rift Builds" />
  </a>
  <span class="badge -translate-x-1/2 ">badge</span>
</div>

<div style="height:8rem;"><!-- extra space so that content is scrollable and isn't hidden by tailwind warning --></div>