Why are inline-block divs inside button becoming centered?

Trying to make a nice meaningful button I noticed following: When having inline-block divs inside a button they become centered without us programmers/stylers having any control over it...

I would like them to have a certain distance from the left or right border of the button.

HTML

<button>
    <div class="button-inner button-inner-left">Left</div>
    <div class="button-inner button-inner-right">Right</div>
</button>

CSS

button {
    padding: 0;
    margin: 0;
    width: 500px;
    height: 50px;
    display: block;
}
.button-inner {
    display: inline-block;
    margin: 0;
    padding: 0;
}
.button-inner-left {
    text-align: left;
    margin-right: auto;
}
.button-inner-right {
    text-align: right;
    margin-left: auto;
}

Here's a codepen for it:

https://codepen.io/JhonnyJason/pen/PRZNpN

How comes that?
Why is that?

Basicly I have 2 Solutions to this problem:

using flexbox https://codepen.io/JhonnyJason/pen/WzrxVB
making button position: relative; and the .button-inner's position: absolute; and then brutally force them to the coordinates they belong to. https://codepen.io/JhonnyJason/pen/EEPyqN

PS: Soo next time when I encounter the problem of not being able to center something I will introduce a wrapper button xD

Solution

That happens cause by default, all buttons has text-align: center, if you force the button to have text-align: left it will go all to left

It is to notice that the text-align property does influence the alignment of the inline-blocks.