Flexbox and IE 10

I have been using flexbox a lot in the past couple of months and it has made a huge difference in laying out my pages. In order to get the best support I am using Bourbon's mixins to provide the syntaxs that support FireFox, Chrome, and IE 10+. Now while the IE 10 2011 syntax support has not caused me too many issues, in true fasion, I have run into one issue (which once know, it simple enough to avoid).

I have a piece of content like this:

<div class="site-application-header">  
  <span>Something on the left</span>
  <span>Something on the right</span>
</div>  

While this can be handled with things like floating or positioning, I prefer to use FlexBox as it provide a more flexible solution and to me, is easier to understand by reading the code. I used the justify-content: space-between; FlexBox property (or -ms-flex-pack: justify; for IE 10) and everything looked fine except in IE 10.

What ended up being the issue is that I was using span elements and in order for this to work properly, the elements need to be either block or inline-block. I ended up switching the code to:

<div class="site-application-header">  
  <div>Something on the left</div>
  <div>Something on the right</div>
</div>