'Aligning two elements, one left and the other right

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.

https://www.tailwindtoolbox.com/templates/admin-template-demo.php

I'd like to add a circle in the right-hand side of the header. Something like

enter image description here

I have tried different solutions and the one that gets closer to what I want is

  <div class="border-b-2 rounded-tl-lg rounded-tr-lg p-2">
      <h5 class="uppercase"><%= host.name %></h5>
      <span class="rounded-full px-2 py-2 float-right"></span>
    </div>

Which places the green dot over the lower border. Clearly float-right isn't the right approach but I can't figure out a way to make it work.

Any ideas?

htmlcsstailwind-css


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions