title: Display two divs on same line without blankspace in between, inside a div with contenteditable="true"
body: <pre><code>&lt;div id="test" class="pad" contenteditable="true"&gt;
    &lt;div id="a" class="fif"&gt;text1&lt;/div&gt;
    &lt;div id="b" class="fif"&gt;text2&lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>As in above code I have a <code>contenteditable</code> div and many divs inside it (child divs). Number of child divs vary dynamically and also the content between div tags. I want <code>text1</code> and <code>text2</code> (i.e. content between div tags) to be displayed on same line, without any blank space in between. Also while typing in <code>contenteditable</code> div if I press ENTER key it should go to next line.</p>
  
  <p>I tried <code>float:left</code> but it does not allow me to go to the next line when I press ENTER key while typing in <code>contenteditable</code> div. <code>display:inline</code>, <code>span</code> when used show blank space in between 2 div contents. I tried using <code>flex</code> from <a href="http://www.w3.org/TR/css3-flexbox/" rel="noreferrer">http://www.w3.org/TR/css3-flexbox/</a> but didn't get desired output.</p>