Tailwind text align bottom-CodePudding

I have the following code that creates two <p> tags to store some text:

<p v-if="my_property <= 0" >{{Math.abs(my_value)}}%</p>
<p v-else >{{my_value}}%</p>
<div >
   <p >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.

CodePudding user response：

You can solve your issue by adding a flex-container for all your <p> tags.

  <div >
    <p v-if="my_property <= 0" >{{Math.abs(my_value)}}%</p>
    <p v-else >29%</p>
    <p >tsa</p>
  </div>

CodePudding user response：

You can follow the below code for the solution

<script src="https://cdn.tailwindcss.com"></script>


<div v-if="my_property <= 0" >{{Math.abs(my_value)}}% 
  <span >tsa</span>
</div>

<div v-else >{{my_value}}% 
  <span >tsa</span>
</div>