title: Inner div floating to next line
body: <p>I was experimenting with div and trying to create a composite control using</p>
  
  <ol>
  <li>Label</li>
  <li>Text field</li>
  </ol>
  
  <p><strong>HTML</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .form-control {
    background-color: yellow;
    margin: 0;
    padding: 0;
  }
  .form-control[data-layoutOrder=horizontal] div[data-section=title] {
    display: inline-block;
    background-color: red;
    width: 50%;
    margin: 0;
    padding: 0;
  }
  .form-control div[data-section=data] {
    background-color: green;
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form-control" data-layoutOrder="horizontal"&gt;
    &lt;div data-section="title"&gt;
      &lt;label for="firstName"&gt;First Name&lt;/label&gt;
    &lt;/div&gt;
    &lt;div data-section="data"&gt;
      &lt;input type="text" placeholder="First Name" id="firstName"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The output of the above code was expected to be label and input to be adjacent to each other, but thats not the case. The div wrapping text field is actually floating to next line, though I have set width of label div and textfield div to 50% using CSS.</p>
  
  <p><img src="https://i.stack.imgur.com/NQ3Ln.jpg" alt="Div floating to next line"></p>
  
  <p>I tried setting padding, margin etc to 0, but none of them worked. What is causing textfield div to float to the next line. When I changed one of the div's width to 49%, both divs got aligned on single line. I didn't understand as why it is behaving so?</p>
  
  <p>Note: I could able to get both of them adjacent to each other using float property - <code>float:left</code> for label div &amp; <code>float:right</code> property for textfield div. But I want to know as why setting 50% width didn't work without float. Do I really need to use float or am I missing something.</p>
  
  <p><img src="https://i.stack.imgur.com/xORKb.jpg" alt="Expected output"></p>
  
  <p>EDIT 1: 
  I found another solution by using <code>white-space</code> attribute as</p>
  
  <pre><code>.form-control {
  background-color: yellow;
  margin:0;
  padding:0;
  white-space:nowrap;
  }
  
  .form-control div[data-section=data] {
  background-color : green;
  display: inline-block;
  width: 50%;
  margin:0;
  padding:0;
  white-space:normal;
  }
  </code></pre>
  
  <p>EDIT 2: Using <code>flex</code> style also has desired effect.
  While searching more, I also came across achieving the same effect using <code>flex</code> style. Note that, it isn't supported in IE 10 and below. Refer <a href="http://caniuse.com/#feat=flexbox" rel="nofollow noreferrer">caniuse</a>.</p>
  
  <pre><code>.form-control {
    background-color: yellow;
    margin: 0;
    padding: 0;
    display: flex;
    display: -webkit-flex;
  }
  .form-control[data-layoutOrder=horizontal] div[data-section=title] {
    display: inline-block;
    background-color: red;
    width: 50%;
    margin: 0;
    padding: 0;
    flex:1;
  }
  .form-control div[data-section=data] {
    background-color: green;
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 0;
    flex:1;
  }
  </code></pre>