how to make one element follow another elements size - html

Question

like let's say you have an image
<img class="testImage" src="test.png"/>
then there's also a section supposed to always follow the height of the image.
I know these examples below would never work, but just to give an idea, if something like this is possible?
height: .testImage;
height: calc(0 + .testImage);
The reaosn I wanna do this is because I am working on something in wordpress where I've put in an image and then there's some content next to it. https://i.gyazo.com/d85b9d8a5384829589b715c2c36fb059.png This looks fine when the screen width is normal. However, when it becomes smaller then the image becomes smaller as well, because it's responsive. The content does not become smaller though. https://i.gyazo.com/0af7d841c695912cda3bd266174238e1.png
For it to match the image 100% I would have to figure out exactly how the image is styled for every screen size. So I am wondering if I can just get the content block to follow the images height?

Answer 1

You should use flex property for this. In this example image width is fixed but you can also put it in % or em
*{
box-sizing: border-box;
}
body, html{
height: 100%;
width: 100%;
margin: 0;
}
.container{
width: 100%;
display:flex;
flex-direction:row;
}
.container img{
display:block;
margin: 0 auto;
width:200px;
flex-shrink:0;
}
.icontainer
{
margin:0;
background-color:red;
border: 0.2em solid black;
flex-shrink:0;
flex-grow:1;
}
<div class="container">
<img src="http://images.fineartamerica.com/images-medium-large-5/sunflower-abstract-by-nature-square-lee-craig.jpg"/>
<div class="icontainer">
<p>content</p>
</div>
</div>

Answer 2

Use same css class to both images
img 1
img 2
.imageClass{
height: 100px;
}
<img class="imageClass" src="https://s-media-cache-ak0.pinimg.com/originals/bd/8c/24/bd8c241fb4c6b19a48668ae993cd0a34.jpg" >
<img class="imageClass" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTrgEmBoOkIN4gekFDarSmiHlv83AK_7UuQW9SDBJYUM-qhb9AK" >