Установите ту же высоту для двух div в CSS

Question

Я пытаюсь выровнять два div на одной строке. Нет проблем для этого, но теперь я ищу решение иметь одну и ту же высоту для каждого div, проблема в том, что первая содержит только значок, а второй содержит текст, который, вероятно, займет больше места, чем значок. Я ищу недвижимость Css, чем может помочь мне сделать это ...

.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>

Вот Jsfiddle того, что я на данный момент. http://jsfiddle.net/nc6L227z/

Answer 1

Оберните два divs в элементе .wrapper и дайте display: table. Затем дать display: table-cell к внутренним дивы и удалить float:left и display: inline-block от других элементов:

РЕДАКТИРОВАТЬ: (добавлено вертикальное выравнивание)

Проверяйте 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

Регулярно проверяйте Fiddle

Я добавил родителя div и приложил к нему высоту.

Answer 3

Вы можете использовать таблицу-ячейку или новый CSS свойство прогибается

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

DEMO

Answer 4

Вы могли бы иметь право один содержаться в левой.

.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>