title: Form-groups side by side with display: inline-block; working with Firefox not with Chrome
body: <p>I am using <code>display: inline-block;</code> to have multiple form-group side by side, it's working with Firefox but not with Chrome.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="form-group dis-inl-blc mar-l-20"&gt;
      &lt;div class="input-group"&gt;
          &lt;span class="input-group-addon"&gt;50x25cm :&lt;/span&gt;
          &lt;span class="value"&gt;Black&lt;/span&gt;
      &lt;/div&gt; 
  &lt;/div&gt;
  &lt;div class="form-group dis-inl-blc mar-l-20"&gt;
      &lt;div class="input-group"&gt;
          &lt;span class="input-group-addon"&gt;50x40cm :&lt;/span&gt;
          &lt;span class="value"&gt;Grey, White /  Black /  Gold, Bronze&lt;/span&gt;
      &lt;/div&gt; 
  &lt;/div&gt;
  &lt;div class="form-group dis-inl-blc mar-l-20"&gt;
      &lt;div class="input-group"&gt;
          &lt;span class="input-group-addon"&gt;50x50cm :&lt;/span&gt;
          &lt;span class="value"&gt;Gold, Bronze&lt;/span&gt;
      &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.dis-inl-blc {
    display: inline-block;
    vertical-align:top;
  }
  .value {
        display:inline-block;
      background-color: white;
      border: 1px solid lightgrey;
      height:30px;
      padding: 4px 10px;
      border-radius: 0 4px 4px 0;
  }
  .mar-l-20 {
    margin-left: 20px;
  }
  </code></pre>
  
  <p>JSfiddle: <a href="http://jsfiddle.net/8osL6xhf/" rel="nofollow noreferrer">http://jsfiddle.net/8osL6xhf/</a></p>
  
  <p>How to make these multiples form-group side by side with with Chrome too?</p>