header alignment with tailwind classes

Question

I have a main title, logo, and subtitle and want to put the subtitle at the center whatever the logo's width.

With the current code sub title's position changes according to the logo's width and does not align with to the main header

<div class="flex justify-between items-center p-4 pt-10">
        <div class="w-40"></div>        
        <p mode="" class="pb-8 w-72 flex justify-center text-white">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
        <a href="{{url('/')}}" class="text-green-500 text-lg underline font-bold text-right w-32 mr-10 pb-8"></a>
        </div>
        <div class="w-screen bg-red-500 bg-opacity-50 mb-5  py-5 text-white flex justify-between">
            <img src="{{ 'storage/'.$logo}}" class="h-14 pl-24" alt="">
            <h1 class="block text-3xl font-semibold text-center my-auto">xxxxx</h1>
            <div class="w-72"></div>
</div>

How to deal with it?

Answer 1

You are trying to adjust the logo and subtitle with flex justifyContent so the logo width changes will cause movement of your subtitle.

There are many options in css for fixing this, one of them is to use absolute position for your img element:

<div class="w-screen bg-red-500 bg-opacity-50 mb-5  py-5 text-white flex justify-between">
    <img src="{{ 'storage/'.$logo}}" class="absolute left-0 top-0 h-14 pl-24 pt-4" alt="">
    <h1 class="block text-3xl font-semibold text-center my-auto">
       Subtitle
    </h1>
</div> 

Answer 2

Easiest way to solve this issue is using position: absolute property on image tag. Use position property and remove extra unwanted div's. Try following code, I hope it will solve your issue.

<div class="flex justify-center bg-red-200 items-center p-4 pt-10">
    <p mode="" class="pb-8 text-white">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</div>
<div class="w-screen bg-red-500 bg-opacity-50 mb-5  py-5 text-white flex justify-center relative">
    <img src="https://placehold.it/150x150?text=logo" alt="" class="absolute left-0 top-0 h-14 pl-24 pt-4">
    <h1 class="block text-3xl font-semibold text-center my-auto">xxxxx</h1>
</div>