CSS два столбца макета при наведении увеличить ширину

Вы можете использовать display: table-cell; или вы можете использовать display: flex; также, поэтому я вношу свой вклад в гибкость в качестве своего последнего и много снисходительного по сравнению с display: table-cell; метод, который был старым способом достижения так...

демонстрация

.wrap {
    display: flex;
}

.wrap .col {
    min-height: 100px;
    background: #eee;
    width: 50%;
    -webkit-transition: all .5s;
    transition: all .5s;
}

div.wrap > div:nth-of-type(1) {
    background: #aaa;
}

div.wrap > div:hover {
    width: 70%;    
}

Я ответил на аналогичный один над здесь