Right align buttons inside flex-CodePudding

How can I align the buttons on the right hand side to the right (the right side of the orange box in the image)?

[Visual of the button element not aligned to the right][1] [1]: https://i.stack.imgur.com/kAi2y.png

HTML:

<div id="button-container">
  <span>
    <button
      
      type="submit"
      >{{lex.labelViewLog}}
    </button>
    <button
      
      type="button"
      >{{lex.reset}}
    </button>
  </span>
  <span>
    <button
      
      [title]="lex.download | titlecase"
      type="button">
      <cds-icon shape="download"></cds-icon>
      <span>{{lex.download}}</span>
    </button>
    <button
      
      [title]="lex.print | titlecase"
      type="button">
      <cds-icon shape="printer"></cds-icon>
      <span>{{lex.print}}</span>
    </button>
  </span>
</div>

CSS:

    #button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

CodePudding user response：

You can use flexbox also inside this <button >

{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

CodePudding user response：

Please use below CSS style:

#button-container{
    display: flex;
    justify-content: flex-end !important;
    }