Robustly keeping two divs vertically separated - html

Question

What's the canonical way to ensure an image and text are vertically separated from one another in a fully responsive way?
Look at this:
Via putting the image and text in separate divs, specifying width and ensuring display:block-inline, I'm able to create the following:
But this isn't perfectly responsive. How? For instance, for really small sizes (sizes that I must support), the image and the text run into one another like below:
There has to be a way to keep them vertically separated along any screen size. Perhaps I should use tables?
Please advise with an illustrative example, preferably with well-support CSS 2.1 attributes since a substantial number of clients I have to cater are Opera Mini browsers with no CSS3 or JS support.
My code is:
<div style="background-color:#E1F5FE;border-radius:10px;padding:10px;overflow:hidden;">
<div style="width:20%;display:inline-block;">
<img src="X.png">
</div>
<div style="width:80%;display:inline-block;float:right;text-align:center;">
Lorem ipsum dolor sit amet, ex eam nulla veritus abhorreant, magna vocent molestiae ea pri, ut eos tritani incorrupte
</div>
</div>
This is a variant of the answers given to this similar SO question. It doesn't really solve my problem.

Answer 1

Simply add width:100% for the image
But check the whole css, on small screens it is better to show the div below each others
.main{
background-color:#E1F5FE;
border-radius:10px;
padding:10px;
overflow:hidden;
}
.main > div{
display:inline-block;
float:left;
text-align:center;
}
.imgDiv{
width:20%;
}
.textDiv{
width:80%;
}
.imgDiv > img{
width:100%;
}
#media screen and (max-width: 450px) {
.imgDiv{
margin: 0 0 20px 25%;
width:50%;
}
.textDiv{
width:100%;
}
}
<div class="main">
<div class="imgDiv">
<img src="https://pbs.twimg.com/profile_images/839721704163155970/LI_TRk1z_400x400.jpg" style="width:100%">
</div>
<div class="textDiv">
Lorem ipsum dolor sit amet, ex eam nulla veritus abhorreant, magna vocent molestiae ea pri, ut eos tritani incorrupte
</div>
</div>

Answer 2

Here's a solution using flex with flex-wrap: wrap to take care of the responsive sizing. At small sizes the icon and text will stack vertically, and at larger sizes the icon and text will be horizontally aligned.
Flex has great support these days, even for the browser you mention.
.main {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.imgDiv {
flex: 1 1;
min-width: 80px;
text-align: center;
}
.imgDiv > img {
width: 80%;
height: auto;
max-width: 150px;
line-height: 0px;
}
.textDiv {
flex: 1 1 250px;
display: flex;
}
.textDiv > p {
flex: 1 0 0px;
padding: 0;
margin: 0;
align-self: center;
}
<div class="main">
<div class="imgDiv">
<img src="https://pbs.twimg.com/profile_images/839721704163155970/LI_TRk1z_400x400.jpg">
</div>
<div class="textDiv">
<p>Lorem ipsum dolor sit amet, ex eam nulla veritus abhorreant, magna vocent molestiae ea pri, ut eos tritani incorrupte</p>
</div>
</div>