clear both is not working after display table - html

Question

I have following html
<div id="parent">
<div id="one">one</div>
<div id="two">two</idv>
</div>
<div id="other">some</div>
And this is the css
#one, #two{
display: table-cell;
vertical-align: middle;
height: 47px;
background: red;
}
#parent
{
display:table;
border-collapse: separate;
border-spacing: 10px 0;
}
#other{
background: blue;
height: 200px;
}
As described in the question the clear both is not working but behaving like before div as if table-cell. The solution for this is to remove display: table;. But I would like to know is there any idea without removing display: table; and display: table-cell; from #one,#two divs.
demo

Answer 1

It's a typo.. You should've seen the red syntax on the js fiddle
<div id="parent">
<div id="one">one</div>
<div id="two">two</div>
</div>
Demo
This here
<div id="two">two</idv>
Should be
<div id="two">two</div>
Note: You've not used clear: both; in your demo, and you don't even
require it, as you are not floating the elements, display: table; just changes the
display of the elements rendered, yes it does make them inline because of table-cell
doesn't mean they need to be cleared. You need to use clear property only when you've
floating elements.
For more info on clear: both;