Aligning two elements, one left and the other right

Question

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

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?

Answer 1

Don't use a <span> use a <div> instead as a <span> requires content. You can then float the <h5> left and the 'circle' right, but you will need to add the clearfix to the parent div.

Also, instead of adding the classes px-2 you can just define the height using the class h-* this is the same with the width: w-*. I set a background-color of green aswell using the class bg-green.

<div class="border-b-2 rounded-tl-lg rounded-tr-lg p-2 clearfix">
    <h5 class="uppercase float-left"><%= host.name %></h5>
    <div class="rounded-full h-3 w-3 circle bg-green float-right"></div>
</div>

see my codepen here: https://codepen.io/CodeBoyCode/pen/jdRbQM

alternatively you can use flex:

<div class="border-b-2 rounded-tl-lg rounded-tr-lg p-2 flex">
    <h5 class="uppercase flex-1 text-center"><%= host.name %></h5>
    <div class="rounded-full h-3 w-3 circle bg-green"></div>
</div>