Two identical divs except for spacing & indentation-- why do they display differently?

Question

I'm trying to use text-align:justify to space divs equally in another div. For some reason it works if the html is indented but not otherwise. Unfortunately the application I'm working on often makes all the html run together in a big string so I need to figure out how.

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

And here is the code:

1- Identical to number 2 but with the all the spacing/indentation

<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 the all the spacing/indentation removed

<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

That is because when there is no whitespace between them they are considered a single word.(imagine a long word where you had inserted tags to colorize some letters. you would not want to have the word split there.)

In the first case the whitespace (enter/tab) acts as a word boundary.

You need to introduce some white space between the tags for properties like text-align: justify; on the parent to take effect.