Необходимо растянуть центральный div элемент во flex контейнере, чтобы он занимал ширину равную x2 окружающих его блоков. Выглядеть должно так:
[div][div][div][div]
[div][""""""""][div]
[div][div][div][div]
HTML:
<div class="row">
<div class="row-item">
<figure>
<img class="item-icon" src="img/cocktail-icon.svg" />
<figcaption class="title">HOLIDAYS</figcaption>
</figure>
<p class="description">Lorem, ipsum dolor sit amet consectetur adipisicing elit, set diam euismod tincidut non.
</p>
</div>
<div class="row-item-main">
<!--<img class="item-icon" src="img/cocktail-icon.svg"/>-->
</div>
<div class="row-item">
<figure>
<img class="item-icon" src="img/cocktail-icon.svg" />
<figcaption class="title">HOLIDAYS</figcaption>
</figure>
<p class="description">Lorem, ipsum dolor sit amet consectetur adipisicing elit, set diam euismod tincidut non.
</p>
</div>
</div>
CSS:
.main .row {
display: flex;
}
.row-item {
margin: 0;
text-align: center;
padding: 20px;
border: 1px solid black;
}
.main .row-item-main {
flex: 1;
padding: 0;
background-color: orange;
}