How to use display: table & display: table-cell :-

here is the HTML -

<div class="tableContainer">
         <div class="tableColumn">column1</div>
         <div class="tableColumn">column2</div> 
         <div class="tableColumn">column3</div> 
</div> 

Apply css for this HTML -

tableContainer{ display: table;}
.tableColumn {display : table-cell; padding:2px; border:1px solid #ddd;}

If we want multiple rows we can also include display: table-row;

HTML :-

<div class="tableContainer">
     <div class="tableRow">
         <div class="tableColumn">column1</div>
         <div class="tableColumn">column2</div> 
         <div class="tableColumn">column3</div> 
    </div>
   <div class="tableRow">
         <div class="tableColumn">column4</div>
         <div class="tableColumn">column5</div> 
         <div class="tableColumn">column6</div>
     </div>
</div>

CSS:-

.tableContainer{ display: table;}
.tableColumn {display : table-cell; padding:2px; border:1px solid #ddd;}

Proportional width columns

Expanding the width of the element to fill the available space in proportion to the size of the content. We can set the width on the display: table element to 100%:

HTML

<div class="tableContainer">
        <div class="tableColumn">Column 1.</div>
        <div class="tableColumn">Column 2 is a bit longer.</div>
        <div class="tableColumn">Column 3 is longer with lots of text in it.</div>
</div>

css

.tableContainer {display: table; width: 100%;}
.tableColumn {display: table-cell;  border:1px solid #000}

Equal height columns

Columns expand to match the height of the largest column in the row. The height is defined by the content and not an explicit fixed height.

HTML

<div class="tableContainer">
        <div class="tableColumn">Column 1.</div>
        <div class="tableColumn">Column 2 is a bit longer.</div>
        <div class="tableColumn">Column 3 is longer with lots of text in it.</div>
</div>

css

.tableContainer { display: table;}
.tableColumn {display: table-cell;width: 100px; border:1px solid #000}