table-cell height, img display: block - html

Question

My understanding of table-cell is that each table-cell's height will expand to be the same height as the tallest table-cell; however, in this example, .col2's height extends below .col1 when the img within .col1 is set to display: block and the text within .col2 is pushed all the way to the bottom. If display: block is removed from the img, .col1 and .col2 line up with the text aligned to the middle. My question is why does the display: block on the img change how the table-cells are rendered and how the text is aligned. Toggle display: block on the img to see the difference.
https://codepen.io/norkuy/pen/EvQQrE
HTML
<div class="row1">
<div class="col1">
<img src="http://lorempixel.com/1000/800/" alt="">
</div>
<div class="col2">
<p><div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet
mollitia est maiores temporibus ea, sint ex repellat ipsa eveniet nesciunt.
</div></p>
</div>
</div>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab veniam
praesentium delectus aliquid ea nisi porro eius rem debitis architecto quas,
hic placeat ratione possimus voluptates perferendis at voluptatibus tenetur!
</div></p>
CSS
.col1, .col2 {
width: 50%;
display: table-cell;
}
.col2 {
background: black;
color: white;
}
.row1 {
display: table;
img {
display: block;
}
}
img {
max-width: 100%;
width: 100%;
}

Answer 1

If you want your table-cell elements work properly, your cells container has to have table-row display
.table {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 50%;
vertical-align: middle;
border-bottom: 1px solid #000;
}
<div class="table">
<div class="row">
<div class="cell">
<br/><br/>fdfsf
</div>
<div class="cell">
dffdsf
</div>
</div>
</div>