title: Can't center absolute position (Tailwind.css)
body: <p><strong>Background &amp; Problem:</strong></p>
  
  <p>I'm using Tailwind CSS and Alpine.js for a simple search bar that has a dropdown positioned using <code>absolute</code></p>
  
  <p>Codepen here: <a href="https://codepen.io/jdonline/pen/YzXpbyJ" rel="noreferrer">https://codepen.io/jdonline/pen/YzXpbyJ</a></p>
  
  <p>When I position the dropdown using <code>relative</code>, it positions perfectly as I want it to (but stretches the rest of the page which I don't want). However, when I change this to <code>absolute</code>, although it no longer stretches the page, it extends the dropdown wider than expected.</p>
  
  <p><strong>Example:</strong></p>
  
  <p>You can see this by clicking the dropdown arrow on the right side of the search bar. You can also see the difference when changing <code>absolute</code> to <code>relative</code> on <strong>Line 26</strong></p>
  
  <p><strong>Question:</strong></p>
  
  <p>How can I, using Tailwind.css, position the dropdown so it has <code>absolute</code> position, but doesn't extend wider than the search bar?</p>