css - How to align same height divs -

i've code

.row {    width: 600px;  }    .row div {    display: inline-block;    width: 50%;    float: left;  }    .text {    background-color: lightblue;  }

<div class="row">    <div class="image">      <img src="http://placehold.it/250x150">    </div>    <div class="text">      <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. debitis incidunt.</p>    </div>  </div>

i want div .text have same height image. want responsive no can't set height .text

thanks !

one option flexbox

body, html {    margin: 0;    padding: 0;  }    .row {    width: 600px;    display: flex;;  }    .text {    background-color: lightblue;   }    img {    vertical-align: top;  }

<div class="row">    <div class="image"><img src="http://placehold.it/250x150">    </div>    <div class="text">      <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. debitis incidunt.</p>    </div>  </div>

other 1 css table

body, html {    margin: 0;    padding: 0;  }    .row {    width: 600px;    display: table;  }    .text {    background-color: lightblue;     display: table-cell;    vertical-align: top;  }    .image {    display: table-cell;    vertical-align: top;  }    img {    vertical-align: top;  }

<div class="row">    <div class="image"><img src="http://placehold.it/250x150">    </div>    <div class="text">      <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. debitis incidunt.</p>    </div>  </div>