Как сделать div по высоте равным высоте родителя?

Есть родительский блок .products, в котором расположено 3 блока .item. Как сделать высоту .item равной высоте .products, чтобы каждый .item был одинаковой высоты. А затем сделать .description одинаковой высоты через height: calc(100% - 228px);

HTML:

<div class="products">



    <div class="item">

        <div class="icon"></div>

        <div class="title">Книги</div>

        <div class="description">

           <p></p>

        </div>

    </div>



    <div class="item">

        <div class="icon"></div>

        <div class="title">Вебинары</div>

        <div class="description">

           <p></p>

        </div>

    </div>



    <div class="item">

        <div class="icon"></div>

        <div class="title">Курсы</div>

        <div class="description">

           <p></p>

        </div>

    </div>



    <div class="clear"></div>

</div>

CSS:

header .item {

    float: left;

    width: calc((100% - 40px)/3);

}



header .item:nth-child(2) {

    margin: 0 20px; 

}



header .item .icon {

    margin: 0 0 15px 0;

    height: 163px;  

}



header .item:nth-child(1) .icon {

    background: url(../images/header__product1_icon.png) center no-repeat;  

}



header .item:nth-child(2) .icon {

    background: url(../images/header__product2_icon.png) center no-repeat;  

}



header .item:nth-child(3) .icon {

    background: url(../images/header__product3_icon.png) center no-repeat;  

}



header .item .title {

    height: 50px;

    -webkit-border-radius: 5px 5px 0 0;

    -moz-border-radius: 5px 5px 0 0;

    border-radius: 5px 5px 0 0;

    background: -webkit-linear-gradient(to right, #af5bfc, #859afa);

    background: -moz-linear-gradient(to right, #af5bfc, #859afa);

    background: -ms-linear-gradient(to right, #af5bfc, #859afa);

    background: -o-linear-gradient(to right, #af5bfc, #859afa);

    background: linear-gradient(to right, #af5bfc, #859afa);

    font-weight: 700;

    font-size: 23px;

    line-height: 50px;

    color: #fff;

    text-transform: uppercase;

    text-align: center;

}



header .item .description {

    padding: 20px;

    background: #fff;

}



header .item .description p {

    padding: 0 0 6px 0;

    font-size: 13px;

    line-height: 17px;

    color: #510f8d;

}



header .item .description p:last-child {

    padding: 0; 

}