CSS - Floating Two Divs Next To Eachother, Instead They Go Underneath Eachother - html

Question

I'm trying to position two divs next to eachother, and keeping the mobile visitors in mind.
The problem: Instead of floating next to eachother, when there's a good amount of text used in the div, it goes underneath.
Here's an example:
.codeblock {
width:500px;
}
.left{
float: left;
}
<div class="codeblock">
<img src="https://placehold.it/307x322" class="left" style="width:125px">
<div class="left">
<h3>Some title</h3>
<p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
</div>
</div>
Why is this happening? Is there a solution, without using fixed values (excluding the image style width)?

Answer 1

Float only the image
.codeblock {
width:500px;
}
.left{
float: left;
margin-right:10px;
}
<div class="codeblock">
<img src="https://placehold.it/307x322" class="left" style="width:125px">
<div >
<h3>Some title</h3>
<p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
</div>
</div>

Answer 2

Another option would be to use flexbox instead of float. It will be a little bit more work, but it is a new feature and always good to try new things.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
UPDATE
Like this: no class. You inform the main class that it is flexbox and its son will have a padding do separate them.
.codeblock {
display: flex;
width:500px;
}
.codeblock > * {
padding: 0 10px;
}
<div class="codeblock">
<img src="https://placehold.it/307x322">
<div >
<h3>Some title</h3>
<p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
</div>
</div>

Answer 3

Considering mobile users I would do this that way with flex-wrap and min values for content
.codeblock {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
max-width:500px;
}
.codeblock>img {
flex: 0 0 125px;
width: 125px;
height: auto;
margin-right: 20px;
}
.codeblock>div {
flex: 1 1 200px;
min-width: 200px;
}
<div class="codeblock">
<img src="https://placehold.it/307x322">
<div>
<h3>Some title</h3>
<p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
</div>
</div>