Margin auto not being respected despite using display block

I have a div containing two label elements. Each label should be on a side of the div. As labels are inline elements, I have tried with display: block and also with display: inline-block for margins to take effect, but the result is not the expected one.

  div {
    color: #ffffff;
    background-color: #3f3f3f;
  }
  label:nth-of-type(1) {
    margin-left: 5px;
  }
  label:nth-of-type(2) {
    display: block;
    <!-- display: inline-block; -->
    margin-right: 5px;
    margin-left: auto;
  }

<div>
  <label>Left side label</label>
  <label>right side label</label>
</div>

As you can see with the code execution, the second label is not respecting the margins and is being displayed underneath the first one.

Solution

The label must have a width and display:block to work with margin auto.

Today it's more flexibel to use flexbox for this.

div {
    color: #ffffff;
    background-color: #3f3f3f;
    display:flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

label:nth-of-type(1) {
    margin-left: 5px;
}

label:nth-of-type(2) {
    margin-right: 5px;
}

<html>
  <body>
    <div>
      <label>Left side label</label>
      <label>right side label</label>
    </div>
  </body>
</html>