Preciso alinhar dois buttons desta maneira
eles devem estar exatamente um ao lado do outro, mas cada um em uma extremidade
Você pode usar as propriedades e valores display: flex e justify-content: space-between na div pai
.divPai {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="divPai">
<button> Esquerda </button>
<button> Direita </button>
</div>
Com isso os itens são distribuídos uniformemente na linha; o primeiro item é renderizado no incio do elemento pai, e o último item no final do elemento pai. Se houver mais de dois elementos o espaçamento entre os demais serão sempre iguais.
Caso queira ver mais sobre flexBox esse guia é bem completo:
Verifique se o código abaixo atende a sua necessidade.
#div { width: 300px; }
.floatL { float: left; }
.floatR { float: right; }
<div id="div">
<input class="floatL" type="button" value="Esquerda" />
<input class="floatR" type="button" value="Direita" />
</div>