html table float,html - Table layout and float left and bootstrap grid - Stack Overflow

I have researched for this question, but did't get the satisfying answer. I am using bootstrap's grid layout.

Please look at the Fiddle here and resize the output window - while resizing you may have noticed that when widow size large enough to add col-sm- classes, my table layout breaks.

What I want is height of both column should be same when they are next to each other (height of largest element), and when they are top/bottom to each other, they should take their own height (which is working now).

HTML

abcde

abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde

CSS

.architect-table {

display: table;

width: 100%;

}

.row {

display: table-row;

}

.cell {

display: table-cell;

min-height: 44px;

border: 1px solid black;

}

However I know, if I remove float: left style, everything will work fine. But I can't as I want a bootstrap's grid layout. Any help would be appreciated.