Align HTML + CSS component

You can use the display flex and justify-content: space properties and values div parent

.divPai {
 width: 100%;
 display: flex;
 justify-content: space-between;
}

<div class="divPai">
  <button> Esquerda </button>
  <button> Direita </button>
</div>

With this the items are evenly distributed on the line; the first item is rendered at the beginning of the parent element, and the last item at the end of the parent element. If there are more than two elements the spacing between the others will always be equal.

If you want to see more about flexBox this guide is very complete:

link

Make sure the code below meets your needs.

#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>