Position of submenu (align: middle?) and custom width - html

Question

I'd like to create a dropdown-menu using tailwindcss. The menu is supposed to have the width w-3/5 and it should be right centered under it's parent menu element.
I created a codepen to demonstrate this: https://codepen.io/spqrinc/pen/Exjympz
This is the snippet:
<div class="group">
<div class="lg:relative w-full">
<button class="mt-1 block px-2 py-4 text-white font-semibold rounded-sm hover:bg-gray-700 md:mt-0 md:ml-2 inline-flex items-center justify-between w-full">
<span class="mr-24">Test</span>
</button>
</div>
<ul class="lg:absolute m-1 mt-4 w-3/5">
<div class="bg-gray-500 text-white w-full px-2 pt-2 pb-4 group-hover">
<li class="">
<a
class="block px-2 py-4 text-white font-semibold rounded-sm hover:bg-gray-700"
href="#">One</a>
</li>
<li class="">
<a class="block px-2 py-4 text-white font-semibold rounded-sm hover:bg-gray-700"
href="#">Two</a>
</li>
<li class="">
<a
class="block px-2 py-4 text-white font-semibold rounded-sm hover:bg-gray-700"
href="#">Three</a>
</li>
</div>
</ul>
</div>
As you can see, the submenu is visible, but it's not centered under it's parent element. A lot of it's width is not visible.
Of course I could do something like left-0 or right-0, but in this case menu elements that are centered in the navbar don't have their menu centered, too. So the submenu should always be centered if possible.
So my question is: How can I get this working as in this little sketch?

Answer 1

Here is how I have setup differently aligned drop downs:
https://codepen.io/forloops/pen/QWpKELQ
The key differences between each is:
left class: left-0
center classes: md:left-1/2 md:-translate-x-1/2
right class: right-0
You can find these classes on the element that has: data-ref='check this element class'
Please note: This example uses AlpineJS along with Tailwind CSS v2