title: Aligning two elements, one left and the other right
body: <p>I'm experimenting with TailwindCSS for the first time and I'm trying to customize the table in the last row of the temple below.</p>
  
  <p><a href="https://www.tailwindtoolbox.com/templates/admin-template-demo.php" rel="noreferrer">https://www.tailwindtoolbox.com/templates/admin-template-demo.php</a></p>
  
  <p>I'd like to add a circle in the right-hand side of the header. Something like</p>
  
  <p><a href="https://i.stack.imgur.com/sbhTa.png" rel="noreferrer"><img src="https://i.stack.imgur.com/sbhTa.png" alt="enter image description here"></a></p>
  
  <p>I have tried different solutions and the one that gets closer to what I want is</p>
  
  <pre><code>  &lt;div class="border-b-2 rounded-tl-lg rounded-tr-lg p-2"&gt;
        &lt;h5 class="uppercase"&gt;&lt;%= host.name %&gt;&lt;/h5&gt;
        &lt;span class="rounded-full px-2 py-2 float-right"&gt;&lt;/span&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Which places the green dot over the lower border. Clearly <code>float-right</code> isn't the right approach but I can't figure out a way to make it work.</p>
  
  <p>Any ideas?</p>