Flexbox grid rowspan

by serg_x

HTML

<div>
  <button>Toggle optional</button>
</div>
<div class="vantages_opt">
  <div class="item_wr big">
    <div class="item" style='background-color:#b5b9fb;'>
      Бонусная<br> программа
    </div>
  </div>
  <div class="item_wr">
    <div class="item" style='background-color:#74bcf4'>
      Отгружаем
    </div>
  </div>
  <div class="item_wr">
    <div class="item" style='background-color:#f5ca64'>
      Бесплатная доставка
    </div>
  </div>
</div>

CSS

*{
  box-sizing: border-box;
}
.vantages_opt{
  display:flex;
  flex-wrap:wrap;
  flex-direction: column;
  height: 500px;
  margin: 0 -5px;
}
.vantages_opt .item_wr{
  flex: 0 0 50%;
  padding: 5px;
}
.vantages_opt .item_wr.big{
  flex: 0 0 100%;
}
.vantages_opt .item{
  border-radius:7px;
  padding: 25px 30px;
  color: #fff;
  height: 100%;
  width: 100%;
  display:flex;
  align-items: center;
}
.optional{
  display: none;
}

JavaScript

$("button").click(function(){
	$(".optional").toggle();
});