Button won't align right in Tailwind CSS

October 7, 2024

I had to adapt a code written by someone else. Using Tailwind and Angular. I had to add an optional text line, so there would be 1 or 2 lines. Both lines should align just right of some title. And a button should remain at the far right end of the container.

My first version was this. This renders fine, but this is very ugly code, I don’t like the use of inline visibility:hidden used to keep text aligned and also the fact that the button has defined twice, but one or the other is removed based on conditions.

  <div class="mt-4 flex space-x-2">
    <p class="font-dotSemiBold text-sm">{{label_title}}</p>
    <p class="text-sm">{{some_text}}</p>

    <button *ngIf="!{{some_condition}}" mat-stroked-button class="!me-0 !ms-auto" [routerLink]="route">{{some_text}}</button>
  </div>

  <div class="mt-4 flex space-x-2" *ngIf="{{some_condition}}">
    <p class="font-dotSemiBold text-sm" style="visibility:hidden">{{label_title}}</p>
    <p class="text-sm">{{some_text}}</p>

    <button mat-stroked-button class="!me-0 !ms-auto" [routerLink]="route">{{ button_text}}</button>
  </div>

Current version: I tried with 3 columns. First 2 columns work fine, but, after trying various things, there’s no way to send this button to the right. How am I supposed to do this?

  <div class="columns-3 mt-4 flex space-x-2">
    <div>
      <p class="font-dotSemiBold text-sm">{{label_title}}</p>
    </div>
    <div>
        <p class="text-sm">{{some_text}}</p>
        <p *ngIf="some_condition" class="text-sm">{{some_text}}</p>
    </div>
    <div class="flex items-end">
      <button mat-stroked-button class="!me-0 !ms-auto" [routerLink]="route">{{ button_text}}</button>
    </div>
  </div>

I tried content-end, item-end, text-right, object-right… on the the div or the button, or both, it depends. Haven’t found the right way. I’m not a Tailwind I expert. I could probably solve this easily in vanilla CSS but looking for a Tailwind solution in the context of this application.

>Solution :

All the CSS classes you’ve listed are to be used with display: grid; if I am not mistaken.

What you would want to use is ml-auto on the element you want to be place at end.

Find attached a link to an example, make sure your container stretches to the desired length.
https://play.tailwindcss.com/nsDfrOXBLJ

EDIT:
Your space-x-2 class also seems to force a specific margin, I would recommend using gap-2 instead.

In your case it should be as follow:

<div class="mt-4 flex w-full space-x-2">
  <div>
    <p class="text-sm font-semibold">{{label_title}}</p>
  </div>
  <div>
    <p class="text-sm">{{some_text}}</p>
    <p *ngIf="some_condition" class="text-sm">{{some_text}}</p>
  </div>
  <div class="ml-auto">
    <button mat-stroked-button class="text-dot_vert !me-0 !ms-auto" [routerLink]="route">{{ button_text}}</button>
  </div>
</div>

Not sure why you’ve placed "dot" in some of your classes?