How to line up DIVs in the same row

In this example you can line up 3 divs in the same line

HTML :

<div class="main-class">
    <div class="sub-class">C1</div>
    <div class="sub-class">C2</div>
    <div class="sub-class">C3</div>
</div>

CSS:

.main-class
{
    display: table;
    width: 100%; /*Optional*/
    table-layout: fixed; /*Optional*/
    border-spacing: 10px; /*Optional*/
}

.sub-class
{
    display: table-cell;
}