Tailwind text align bottom - html

Question

I have the following code that creates two <p> tags to store some text:
<p v-if="my_property <= 0" class="text-green-500 text-lg font-bold">{{Math.abs(my_value)}}%</p>
<p v-else class="text-red-500 text-lg font-bold">{{my_value}}%</p>
<div class="inline-block align-bottom bg-yellow-500 align-text-bottom">
<p class="text-gray-500 text-sm ml-1 inline-block align-text-bottom align-bottom">tsa</p>
</div>
I'm trying to have the last <p> tag align bottom as compared to the first. I've tried putting the <p> tag currently in the <div> inside and outside a <div> tag, but I can't seem to get the result right, and it currently looks like this:
I want the "tsa" text to appear here:
What do I need to change about the way I've currently got it?
Note: I've highlighted the <div> in yellow to just show the text is not aligned to the bottom of it.

Answer 1

You can solve your issue by adding a flex-container for all your <p> tags.
<div class="flex items-baseline">
<p v-if="my_property <= 0" class="text-green-500 text-lg font-bold">{{Math.abs(my_value)}}%</p>
<p v-else class="text-red-500 text-lg font-bold">29%</p>
<p class="text-gray-500 text-sm ml-1">tsa</p>
</div>

Answer 2

You can follow the below code for the solution
<script src="https://cdn.tailwindcss.com"></script>
<div v-if="my_property <= 0" class="text-green-500 text-lg font-bold">{{Math.abs(my_value)}}%
<span class="text-gray-500 text-sm ml-1 inline-block align-text-bottom align-bottom">tsa</span>
</div>
<div v-else class="text-red-500 text-lg font-bold">{{my_value}}%
<span class="text-gray-500 text-sm ml-1 inline-block align-text-bottom align-bottom">tsa</span>
</div>