title: header alignment with tailwind classes
body: <p>I have a main title, logo, and subtitle and want to put the subtitle at the center whatever the logo's width.</p>
  <p>With the current code sub title's position changes according to the logo's width and does not align with to the main header</p>
  <pre><code>&lt;div class=&quot;flex justify-between items-center p-4 pt-10&quot;&gt;
          &lt;div class=&quot;w-40&quot;&gt;&lt;/div&gt;        
          &lt;p mode=&quot;&quot; class=&quot;pb-8 w-72 flex justify-center text-white&quot;&gt;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&lt;/p&gt;
          &lt;a href=&quot;{{url('/')}}&quot; class=&quot;text-green-500 text-lg underline font-bold text-right w-32 mr-10 pb-8&quot;&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class=&quot;w-screen bg-red-500 bg-opacity-50 mb-5  py-5 text-white flex justify-between&quot;&gt;
              &lt;img src=&quot;{{ 'storage/'.$logo}}&quot; class=&quot;h-14 pl-24&quot; alt=&quot;&quot;&gt;
              &lt;h1 class=&quot;block text-3xl font-semibold text-center my-auto&quot;&gt;xxxxx&lt;/h1&gt;
              &lt;div class=&quot;w-72&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/SoaAD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SoaAD.png" alt="enter image description here" /></a></p>
  <p>How to deal with it?</p>