Display two divs on same line without blankspace in between, inside a div with contenteditable="true"

<div id="test" class="pad" contenteditable="true">
  <div id="a" class="fif">text1</div>
  <div id="b" class="fif">text2</div>
</div>  

As in above code I have a contenteditable div and many divs inside it (child divs). Number of child divs vary dynamically and also the content between div tags. I want text1 and text2 (i.e. content between div tags) to be displayed on same line, without any blank space in between. Also while typing in contenteditable div if I press ENTER key it should go to next line.

I tried float:left but it does not allow me to go to the next line when I press ENTER key while typing in contenteditable div. display:inline, span when used show blank space in between 2 div contents. I tried using flex from http://www.w3.org/TR/css3-flexbox/ but didn't get desired output.