Set the same height for two div in CSS

Question

I'm trying to align two div on the same line. No problem for that, but now I'm looking for a solution to have the same height on each div, the problem is that the first one contain only an icon and the second contain text that will probably take more space than the icon. I'm looking for a css property than can help me to do this...

 .zone-info { background-color: #e0f1f5; line-height: 1.363em; margin-bottom: 3px; padding: 5px 0; } .zi-icon { display: inline-block; float: left; text-align: center; vertical-align: center; height: 100%; width: 10%; } .zi-text { width: 90%; display: inline-block; float: left; } 

 <div class="zi-icon zone-info">icone</div> <div class="zi-text zone-info">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.<br> # Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.<br> # Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</br> # Sed ut perspiciatis unde omnis iste natus error sit. </div> 

Here is a Jsfiddle of what I do for the moment. http://jsfiddle.net/nc6L227z/

Answer 1

Wrap the two divs in a .wrapper element and give display: table . Then give display: table-cell to the inner divs and remove float:left and display: inline-block from the other elements:

EDIT: (vertical align added)

Check the Updated DEMO

.wrapper { display: table }
.zone-info {
    background-color: #e0f1f5;
    display: table-cell;
    line-height: 1.363em;
    vertical-align: middle;
}

.zi-icon {
    text-align: center;
    width: 10%;
}

.zi-text {
}

Answer 2

You can use table-cell or a new css property flex

 div{display:flex} //you don't need float , inline-block, table cell anythng

DEMO

Answer 3

You could have the right one be contained in the left one.

 .col1 { float: left; border: 1px solid green; margin-right: 200px; background: red; } .col1-content { float: left; width: 50px; } .col2 { float: left; background: green; } .col2-content { width: 200px; } .clearfix:after { content: "."; clear: both; display: block; visibility: hidden; height: 0px; } 

 <div class="outer"> <div class="inner clearfix"> <div class="col1"> <div class="col1-content"> Lorem ipsum dolor sit amet. </div> <div class="col2"> <div class="col2-content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni excepturi animi vitae saepe ratione cumque nostrum eius impedit delectus quibusdam eaque earum et iusto quam soluta. Expedita eius perspiciatis necessitatibus facilis dignissimos quis velit maiores incidunt sequi odio non reprehenderit ut cum perferendis enim. Eligendi fugit nesciunt dolore aliquam numquam. </div> </div> </div> </div> </div> 

Answer 4

Check Fiddle

I have added a parent div and applied height on it.