Weird transform-origin situation

[mahansky]

Hey guys, so I'm trying to apply some transformations on elements and I'm getting weird results while trying to do the same with Tailwind.

Difference between following snippets is in the origin-top-left and origin-top-right Tailwind classes.
Red and Yellow divs should overlap (as they share the same? code).

<div class="absolute bg-green-500 w-10 h-10" style="left: 200px; top: 200px">
  <div class="bg-red-500 absolute top-0 left-0 w-32 h-2 transform origin-top-left z-50 -rotate-90 -translate-x-full"></div>
  <div class="bg-yellow-300 absolute top-0 left-0 w-32 h-2" style="transform: rotate(-90deg) translateX(-100%); transform-origin: top left"></div>
</div>

After changing origin to top-right:

<div class="absolute bg-green-500 w-10 h-10" style="left: 200px; top: 200px">
  <div class="bg-red-500 absolute top-0 left-0 w-32 h-2 transform origin-top-right z-50 -rotate-90 -translate-x-full"></div>
  <div class="bg-yellow-300 absolute top-0 left-0 w-32 h-2" style="transform: rotate(-90deg) translateX(-100%); transform-origin: top left"></div>
</div>

Am I doing something wrong? Thanks for help