HTML with image and text side by side with fix height

I wanted to have multiple rows of images with text beside each images. After each rows, I want to have a horizontal line below. However, I am not able to get the height of each row to be consistent because the text can be 1 line or multiple lines. I could use "text-overflow: ellipsis" with max 2 text lines (to limit the text lines), but if there is only 1 text line, the height of each row would not be the same also.

Below are my codes:

    .iconDetails {        margin-left:4px;        margin-right:8px;        float:left;         height:70px;        width:100px;       }         .container2 {        width:100%;        height:200;        padding:1%;      }      .column2 h4{        font-size: 15px; font-weight: 600;          margin:0px 0px 0px 0px;      }      .column2 p{        font-size: 13px; font-weight: 300;          margin:0px 0px 0px 0px;      }          <div class='container2'>      <div>          <img src='https://i.ytimg.com/vi/_v-U3K1sw9U/sddefault.jpg' class='iconDetails'>      </div>      <div style='margin-left:10px;'>    <h4>Title 1</h4>            <p>Body 1.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text  </p>    </div>  </div>  <hr>      <div class='container2'>        <div>            <img src='https://i.ytimg.com/vi/_v-U3K1sw9U/sddefault.jpg' class='iconDetails'>        </div>        <div style='margin-left:10px;'>      <h4>Title 2</h4>          <p>Body 2.. Text... Text ... Text ... Text... Text... Text ... Text ... Text... Text... Text ... Text ... Text  </p>    </div>    <hr>    <div class='container2'>      <div>            <img src='https://i.ytimg.com/vi/_v-U3K1sw9U/sddefault.jpg' class='iconDetails'>      </div>      <div style='margin-left:10px;'>    <h4>Title 3</h4>         <p>Body 3.. Text... Text ... Text ... Text...  </p>    </div>  </div>    <hr>    <div class='container2'>      <div>            <img src='https://i.ytimg.com/vi/_v-U3K1sw9U/sddefault.jpg' class='iconDetails'>      </div>      <div style='margin-left:10px;'>    <h4>Title 4 .... Text Text Text Text........ Text .... Text .... Text ... Text...</h4>         <p>Body 4.. Text... Text ... Text ... Text...  </p>    </div>    </div>  

https://stackoverflow.com/questions/67428111/html-with-image-and-text-side-by-side-with-fix-height May 07, 2021 at 10:04AM