Two identical divs except spacing and indentation - why are they displayed differently?

Question

I am trying to use text-align:justifyfor spatial divs equally in another div. For some reason, it works if html is indented, but not otherwise. Unfortunately, the application I'm working on often makes the whole html work together on a large line, so I need to figure out how to do this.

Here is a link to the code handle with both problems: http://www.codepen.io/evanhobbs/pen/LDgJc

And here is the code:

1- Identical to number 2, but with the whole interval / indent

<div class="equal-justify-wrapper">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <span class="equal-justify-stretcher"></span>
</div>

2-. Identical to number 1, but with removal of all indents / indents

<div class="equal-justify-wrapper"><div>one</div><div>two</div><div>three</div><span class="equal-justify-stretcher"></span></div>

CSS

.equal-justify-wrapper {
  list-style: none;
  background-color:red;
  text-align: justify;
   -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

.equal-justify-wrapper > div {
     width: auto;
    //height: 40px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    background: #000;
    color: yellow;

}

.equal-justify-stretcher {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

Answer 1

, , ( , , , , .)

(enter/tab) .

, , text-align: justify; , .

Answer 2

, . . : text-align :

"justify" , inline- , , , , .

[text-align] "justify", ( inline-table inline-block).

, .

, . .

---

, , . , . html- :