I am trying to make my two buttons appear on the far right of a piece of text. I want the text and two buttons to all be inline with each other but the text is on the left and the two buttons are on the right. I have seen multiple solutions and I could get it to work with only 1 button but when I have two buttons it does not work.

I run a for loop over 'weaknesses' and print out each weakness. Each weakness will have an update and delete action.

I tried to do margin-left but each weakness is a different length so my buttons would not line up

I also tried using some solutions from this post but could not seem to get the expected outcome: Place a button right aligned

Any help would be appreciated

HTML

<div *ngFor="let weakness of weaknesses | async">
    <div class="flex-box">
        <p>{{ weakness }}</p>
        <a class="btn btn-light btn-sm pull-right" href="#">Update</a>
        <button type="button" class="btn btn-danger btn-sm">Delete</button>
    </div>
</div>

CodePudding user response：

One solution is auto margin with flex

nav {
  display: flex;
  align-items: center;
}

nav button:first-of-type {
  /* Key here is margin-left needs to be auto */
  margin: 0 10px 0 auto
}

<nav>
  <span>Text</span>
  <button>Button 1</button>
  <button>Button 2</button>
</nav>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Try this:

#btnHolder {
  position:fixed;
  top:10px;
  right:10px;
  
}

<p>Text is here</p>
<div id="btnHolder">
    <button>Update</button>
    <button>Delete</button>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I dont know why it was so hard. It should have been easier.