CSS Table Structure Issue - html

Question

I am a noob in CSS and i was actually trying to create a table kind of structure using Html Div and CSS, but got stuck in one issue.
Problem is that I have put 4 columns in 1 single row. The last column contains a text area which is expandable.
When I try to expand the text area, only the last column expands instead of the whole row.
Below is the code demo:
http://codepen.io/anon/pen/oIChn

Answer 1

The code isn't working because you arent following a table structure, which should (always) be:
table
-row
--cell
--/cell
-/row
/table
IN your code, you are using some display:tablexx CSS, however often in elements isolated from other aspects of the table structure they are expecting to be next to, as such the layout is broken.
The correct CSS/HTML structure is (e.g):
Demo Fiddle
HTML
<div class='table'>
<div class='row'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
<div class='row'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
</div>
CSS
.table {
display:table;
height:100%;
}
.cell {
display:table-cell;
width:50px;
height:100px;
border:1px solid black;
}
.row {
display:table-row;
}
Note that using this there are no specific thead or tbody sections, you can simply adapt your CSS to style headers etc as appropriate.

Answer 2

Add this at the end of your css, should do the trick
.r-tab-head{
display: table-row;
float: none;
}
.divCell {
display: table-cell;
float: none;
}