html - CSS - 3 Links - Left Align 1, Right Align 2 -

suppose have 3 buttons

<div class='button-wrap>  <a class='button'>first button</a>  <a class='button'>second button</a>  <a class='button'>third button</a> </div>

what best way left align first, , right align second two? preferably without using float.

i have tried wrapping second 2 in seperate div , using text-align:right div causes buttons go out of alignment 1 another.

you can achieve display:flex - no need change markup

.button-wrap {    display: flex;  }  .button:nth-child(2) {     /* margin left second button */    margin-left: auto;  }

<div class="button-wrap">    <a class="button">first button</a>    <a class="button">second button</a>    <a class="button">third button</a>  </div>

Trigger