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>


Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

How to get the ip address of VM and use it to configure SSH connection dynamically in Ansible -

javascript - Get parameter of GET request -