CODEWITHSUNDEEP
htmlcsstailwind-css
Sig
Sig

Reputation: 5928

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?

Upvotes: 11

Views: 15609

Answers (1)

CodeBoyCode
CodeBoyCode

Reputation: 2267

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>

Upvotes: 17

Related Questions