Align HTML + CSS component

Question

I need to line up two Uttons this way

they should be exactly next to each other, but each at an end

Answer 1

You can use the properties and values display: flex and Justify-content: space-between in the father div

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

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

Thus the items are distributed evenly 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:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

Make sure the code below meets your need.

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