Floating divs inside inline-block parent goes down on resize - html

Question

I have 2 floating divs, inner-left and inner-right inside parent container inner-container.
inner-container is set to display: inline-block; to have it's width to be equal of width of it's children.
The problem is, when I resize the window, inner-right div goes down and only then starts to resize itself.
How do I inner-right make it stay on the same line with inner-left, and, in the event of window resize, to resize instead of going down?
HTML:
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="inner-container">
<div class="inner-left"><img src="http://placehold.it/100x100" alt=""></div>
<div class="inner-right"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In justo orci, rutrum nec feugiat sed, ultrices non dolor. Aliquam laoreet.</strong><br>
Vivamus purus metus.
</div>
</div>
</div>
CSS:
.container {
background-color: #f0fff0;
padding: 10px;
border: 1px solid #bce2c1;
border-radius: 5px;
}
.inner-container {
padding: 10px;
background-color: #ffffff;
border: 1px solid #bce2c1;
border-radius: 5px;
margin-top: 10px;
display: inline-block;
}
.inner-left {
float:left;
width: 60px;
}
.inner-left img {
height: 60px;
width: 60px;
}
.inner-right {
float:right;
text-align: left;
padding-left: 10px;
}
JSFIDDLE:
https://jsfiddle.net/acidonyx/naw6ojwe/4/

Answer 1

well just remove float: right from .inner-right and your problem will be solved.
.inner-right {
text-align: left;
padding-left: 10px;
}
to solve your other problem you can do
.inner-right {
overflow: hidden;
text-align: left;
padding-left: 10px;
}

Answer 2

For this you should use flexbox, here with inline-flex to fit your requirement
.container {
display: inline-block;
background-color: #f0fff0;
padding: 10px;
border: 1px solid #bce2c1;
border-radius: 5px;
}
.inner-container {
display: inline-flex;
padding: 10px;
background-color: #ffffff;
border: 1px solid #bce2c1;
border-radius: 5px;
margin-top: 10px;
}
.inner-left img {
height: 60px;
width: 60px;
}
.inner-right {
padding-left: 10px;
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="wrap-container">
<div class="inner-container">
<div class="inner-left">
<img src="http://placehold.it/100x100" alt="">
</div>
<div class="inner-right"><strong>Lorem ipsum dolor sit</strong>
<br>Vivamus purus metus.
</div>
</div>
</div>
</div>

Answer 3

You could try floating .inner-right to the left instead, and giving it a width set in a percentage value, like this:
.inner-right {
float:left;
width: 85%;
}
JSFIDDLE
You can use media queries to update the percentage as you need.