How to make all sibling DIVs inside a container DIV have equal height?

Question

So I have 2 divs in a container. One floated left and one floated right. The one on the right is text. The one on the left is an image. How can I set the image height so it's equal to the unknown height of the right text?

The container of both divs should also be the same height as the text div. The image's height should not be taller or shorter than the text.

The div containing the text should be as big as the amount of text in it.

Here's an example on JSFiddle

HTML:

<div class="body">

<div class="imgContainer"><img src="http://www.appleinspires.me/wp-content/uploads/2013/05/mzl.bneaekit.512x512-75.jpg" alt=""></div>

<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ducimus, excepturi ad! Porro officia, est omnis eum modi reiciendis, velit aliquid dolores tempore odit ipsa temporibus ullam. Adipisci, optio, neque?<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure deserunt amet aspernatur nisi, voluptatem consequuntur vel saepe dolorem odio atque, porro architecto alias aliquid. Atque ea soluta, obcaecati sapiente mollitia!</div>

</div>

CSS:

.body {
display: table;
background-color: grey;
margin-bottom: 10.38vw;
margin-left: 5.19vw;
margin-right: 5.19vw;
}
.imgContainer {
    float: left;
    position: relative;
    height: 100%;
    width: 40%;
    background-color: green;
}
img {
    height: 100%;
    width: 100%;
    display: block;
    border-radius:100%;
    margin-left: auto;
    margin-right: auto;
}
.text {
    background-color:blue;
    float: right;
    width: 60%;
    font-size: 2.26vw;
    text-align: left;
    display: table-cell;
}

On the JSFiddle, the image's height appears to be taller than the height of the div with text, but this is not what I want. I'd like the image to be shrunken to the height of the right div. Since my container is displayed as a table and the children divs should be displayed as table-cells, the container's height is supposed to be the same height as the text, which is what I'm aiming for. The image should also be horizontally centered in its div once it's shrunk, but my current code should allow that to work.

Another thing: The point of this is because I'm trying to go for a responsive design. The image should stay the same height as the text as the browser window is resized.

And just to clarify, I do not want the height of the text div to enlarge to the height of the image; I want the image's height to be shrunken to the height of the text.

If anyone has any suggestion or solutions, please let me know. Thanks!

Answer 1

You can just change the parent element .body to a flexbox using display: flex like this:

.body   {
  display: flex;
}

The result of this is that your items will all line up in a row, using the size of the content as their size in the main axis. If some items are taller than others, all items will stretch along the cross axis to fill its full size.

---

Check this JSFiddle or run the Code Snippet below for a practical example of the above code:

.body {
  display: flex;
  background-color: grey;
  margin: 0 auto;
}

.imgContainer {
  background-color: green;
}

img {
  height: 100%;
  width: 100%;
  border-radius: 100%;
}

.text {
  background-color: blue;
  font-size: 14px;
  text-align: left;
}
.text2 {
  background-color: red;
  font-size: 14px;
  text-align: right;
}

<div class="body">

<div class="imgContainer">
  <img src="https://picsum.photos/512/512" alt="">
</div>

<div class="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ducimus, excepturi ad! Porro officia, est omnis eum modi reiciendis, velit aliquid dolores tempore odit ipsa temporibus ullam.!
</div>

<div class="text2">
  Just some short sentence.
</div>

</div>

Answer 2

You can

• Remove floats in order to use a tabular layout, which will ensure both elements have the same height.
• Remove the image from the normal flow of the document using absolute positioning. This way .imgContainer will be as short as possible.
• Make the image grow to fill .imgContainer.

.body {
  display: table;
}
.imgContainer,
.text {
  display: table-cell;
  vertical-align: top;
}
.imgContainer {
  position: relative;
  width: 40%;
  background-color: green;
}
img {
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 100%;
}
.text {
  background-color: blue;
  width: 60%;
  display: table-cell;
}

<div class="body">
  <div class="imgContainer">
    <img src="http://www.appleinspires.me/wp-content/uploads/2013/05/mzl.bneaekit.512x512-75.jpg" alt="">
  </div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ducimus, excepturi ad! Porro officia, est omnis eum modi reiciendis, velit aliquid dolores tempore odit ipsa temporibus ullam. Adipisci, optio, neque?<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure deserunt amet aspernatur nisi, voluptatem consequuntur vel saepe dolorem odio atque, porro architecto alias aliquid. Atque ea soluta, obcaecati sapiente mollitia!</div>
</div>