2 line button renders incorrect using Tailwind CSS

The following code with Tailwind CSS results in below output. But it looks wrong the second button should align with the others.

<div class="w-full">
  <div class="justify-stretch">
    <button class="m-2 h-12 w-2/12 border border-gray-500">MyLabel</button>
    <button class="m-2 h-12 w-2/12 border border-gray-500">
      MyLabel
      <br />
      Second Line
    </button>
    <button class="m-2 h-12 w-2/12 border border-gray-500">MyLabel</button>
    <button class="m-2 h-12 w-2/12 border border-gray-500">MyLabel</button>
    <button class="m-2 h-12 w-2/12 border border-gray-500">MyLabel</button>
    <button class="m-2 h-12 w-2/12 border border-gray-500">MyLabel</button>
    <button class="m-2 h-12 w-2/12 border border-gray-500">MyLabel</button>
  </div>
</div>

Result

What am I doing wrong? What should I do to fix this?

Code to be found here:

https://play.tailwindcss.com/Mt9IczUnNX

>Solution :

Add align-top to the button with multiple lines (or all of them). The default vertical alignment is baseline, and you need to adjust for that.

https://play.tailwindcss.com/769kkQcr1x