TH CSS Styling , how to auto resize a whole row?

June 12, 2015 0 Comments

i am using a UL and Li to create a table like look for my HTML website.

<div class="list-wrapper">              
<div class="row">
                <ul >
                    <li class="col-xs-1"><img src="./details_files/experience.png" alt=""></li>
                    <li class="col-xs-2" ><strong>Total Experience</strong></li>
                    <li class="col-xs-3" id= "url1">7 Year(s)</li>
                    <li class="col-xs-3">7 Year(s)</li>
                    <li class="col-xs-3">7 Year(s) this is going to the next line</li>
                </ul>
</div>          

The following CSS is used :

 .list-wrapper ul li { display: table-cell;
    vertical-align: top;
    width: 185px;
    height: auto;
    font-size: 20px;
    border-right: 5px solid #E6E6E6;
    border-bottom: 5px solid #E6E6E6;
    padding: 10px;
    background-color: #FFF;}    

Right now the 4th li is taking 2-3 lines, but the other li’s are only taking 1. I want to auto adjust the cell size to take up the entire row.
Please HELP>>>
THE screenshot is :
http://s18.postimg.org/5jjagrbux/upload.png

Source: html