css - Div has equal height -

i've code

.container {    width: 960px;    margin: 0 auto;  }    p {    margin: 0;    padding: 0;  }    .col {    width: 50%;    display: inline-block;  }    .col:first-child{    float: left;  }    .col:last-child{    float: right;  }    .text {    background-color: lightblue;  }

<div class="container">    <div class="col">      <div class="text">        <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. numquam placeat amet dolore asperiores et omnis voluptas dolorum natus nobis. ad, provident exercitationem tempora vel laudantium iure libero possimus voluptates ipsa.</p>      </div>      <div class="img">        <img src="http://placehold.it/480x150">      </div>    </div>    <div class="col">      <div class="img">        <img src="http://placehold.it/480x50">      </div>       <div class="text">        <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>      </div>    </div>  </div>

without having height declared. want 2 .col have same height. need take care responsive too.

i try set fixed height last .text div not me..

thanks !

flexbox can that:

.container {    width: 960px;    margin: 0 auto;    display: flex;  }  p {    margin: 0;    padding: 0;  }  .col {    border: 1px solid grey;    background:plum;  }  .text {    background-color: lightblue;      }

<div class="container">    <div class="col">      <div class="text">        <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. numquam placeat amet dolore asperiores et omnis voluptas dolorum natus nobis. ad, provident exercitationem tempora vel laudantium iure libero possimus voluptates ipsa.</p>      </div>      <div class="img">        <img src="http://placehold.it/480x150">      </div>    </div>    <div class="col">      <div class="img">        <img src="http://placehold.it/480x50">      </div>      <div class="text">        <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>      </div>    </div>  </div>