How to align text in a same paragraph in left and right in primevue InlineMessage

I want to align 2 texts left and right using bootstrap. I have used primevue component InlineMessage.

<InlineMessage severity="error" class="my-4 block align-items-center">Error Request Percentage <span class="" > 10%</span> </InlineMessage>

Can someone help me?

I tried to use text-align, align-items but it seems like not applying?

Solution

In primevue <InlineMessage> component has an embedded icon. in that case, if you going to use class = "justify-content-between" it will be not worked as you expected.

But you will be able to do it...

<InlineMessage severity="success" class="block py-5 my-4">   
  <div class="" style="float:left">Total Requests</div>   
  <div class="" style="float:right">10</div>  
</InlineMessage>

And also parent element width should be 100%.