div layout render sample

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<DIV class="ui-layout-table">
    <DIV class="ui-layout-column-group">
        <DIV class="ui-layout-column ui-layout-column-30F " />
        <DIV class="ui-layout-column ui-layout-column-60 " />
        <DIV class="ui-layout-column ui-layout-column-spring " />
    </DIV>
</DIV>
<DIV class="ui-layout-row-group">
    <DIV class="ui-layout-row ">
        <DIV class="ui-layout-cell ">
             <SPAN>R1C1</SPAN>
        </DIV>
        <DIV class="ui-layout-cell ">
            <SPAN>R1C2</SPAN>
        </DIV>
        <DIV class="ui-layout-cell ">
            <SPAN>R1C3</SPAN>
        </DIV>
    </DIV>
    <DIV class="ui-layout-row ui-toggle">
        <DIV class="ui-layout-cell ">
            <SPAN>R2C1</SPAN>
        </DIV>
        <DIV class="ui-layout-cell ">
            <SPAN>R2C2</SPAN>
        </DIV>
        <DIV class="ui-layout-cell ">
            <SPAN>R2C3</SPAN>
        </DIV>
    </DIV>
    <DIV class="ui-layout-row ">
        <DIV class="ui-layout-cell ">
            <SPAN>R3C1</SPAN>
        </DIV>
        <DIV class="ui-layout-cell ">
            <SPAN>R3C2</SPAN>
        </DIV>
        <DIV class="ui-layout-cell ">
            <SPAN>R3C3</SPAN>
        </DIV>
    </DIV>
</DIV>

CSS

.ui-layout-table {
    width: 100%;
    display: table;
    table-layout: fixed;
    outline:1px;
}
.ui-layout-column {
    display: table-column;
}
.ui-layout-column-group {
    display: table-column-group;
}
.ui-layout-column-30F {
    width: 30px;
}
.ui-layout-column-60 {
    width: 60%;
}
.ui-layout-column-spring {
    width: auto;
}
.ui-layout-row-group {
    display: table-row-group;
}
.ui-layout-row {
    display: table-row;
}
.ui-layout-cell {
    display: table-cell;
}