How do I align button in a tailwind flex? - tailwind-css

Question

I have this output:
What I want to do is centering both those two button at top, and centering that Stop button in the bottom.
I am still new in TailwindCSS, and what I am guessing is I have to use flex, and then centered items in the div beneath that flex div.
For now this is my code:
<div class="space-y-0">
<div class="bg-green-300 w-32 px-2 py-2 rounded-r-2xl mt-2 mr-2 mb-2 align-content-center">
<img src="{% static 'sample/eko.jpg' %}" class="w-32 rounded-r-2xl">
<div class="align-content-center text-center text-green-800">Eko S. W</div>
</div>
<div class="bg-blue-300 mr-2 w-32">
<div class="p-2 flex content-start">
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="green">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</button>
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="green">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11" />
</svg>
</button>
</div>
<div class="text-center font-bold text-2xl text-white">04:51</div>
<div class="flex items-stretch p-2 items-center">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Stop
</button>
</div>
</div>
</div>

Answer 1

i used flex as you can see
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="space-y-0">
<div class="bg-green-300 w-32 px-2 py-2 rounded-r-2xl mt-2 mr-2 mb-2 align-content-center">
<img src="{% static 'sample/eko.jpg' %}" class="w-32 rounded-r-2xl">
<div class="align-content-center text-center text-green-800">Eko S. W</div>
</div>
<div class="bg-blue-300 mr-2 w-32">
<div class="p-2 flex flex-col justify-center">
<div class="mx-auto"><button >
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="green">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</button>
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="green">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11" />
</svg>
</button></div>
<div class="text-center font-bold text-2xl text-white">04:51</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Stop
</button>
</div>
</div>
</div>