Align items with tailwind - css

Question

I'm new using Tailwind and I have a simple text with input that consists of two rows
fiddle
Code:
<div>
<div
class="text-center p-4 flex flex-col space-x-5 space-y-4 md:flex-row md:space-y-0 md:space-x-4 md:justify-center"
>
<p class="text-center">Value:</p>
<div class="w-40">
<input
v-model="model.currentValue"
class="p-2 border-2 border-black-500 outline-none focus:bg-gray-100 w-10"
/>
</div>
</div>
<div
class="text-center p-4 flex flex-col space-x-5 space-y-4 md:flex-row md:space-y-0 md:space-x-4 md:justify-center"
>
<p class="text-center">Daily Value to upload:</p>
<div class="w-40">
<input
v-model="model.incrementBy"
class="p-2 border-2 border-black-500 outline-none focus:bg-gray-100 w-10"
/>
</div>
<button #click="update">Upload</button>
</div>
</div>
As you can see the two text are not vertically aligned, the same for inputs
issue
How can I align text to left and center it to input? Regards

Answer 1

Use CSS grid for this:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="p-4 grid grid-cols-2 gap-x-2">
<p class="text-right my-2">Value:</p>
<div class="text-left">
<input v-model="model.currentValue" class="p-2 border-2 border-black-500 outline-none focus:bg-gray-100 w-10" />
</div>
<p class="text-right my-2">Daily Value to upload:</p>
<div class="text-left">
<input v-model="model.incrementBy" class="p-2 border-2 border-black-500 outline-none focus:bg-gray-100 w-10" /><button #click="update">Upload</button>
</div>
</div>