Make a floated image appear beside some text inside a div - html

Question

I have a div with some text and an image that should appear to the right of the text.
The problem is that the image is appearing on the right, but it is not beside the text. I have used float:right and clear option but it still doesn't work properly.
My code is:
.box {
width: 600px;
height: 1000px;
left: calc( 45% - 200px);
top: 20%;
position: absolute;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 0px;
text-align: center;
box-sizing: border-box;
display: flex;
}
.content {
border: 4px solid red;
width: 600px;
word-wrap: break-word;
}
.img {
margin-left: 15px;
float: right;
display: inline-block;
clear: both;
}
<div class="box">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
<img src="http://placehold.it/150x250/000000/ffffff" class="img">
</div>
</div>
THIS is what I want to do.

Answer 1

Just put the floated element first:
<div class="box">
<div class="content">
<img src="http://placehold.it/150x250/000000/ffffff" class="img">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
</div>
</div>
It'll float off to the left and then your text will fill the space on the right.
By putting the text first, the image doesn't displayed until after the text element ends, so the image will be floated under the text. (Just like if you didn't float it, it would appear under the text).
Expand for a working snippet to see it in action:
.box {
width: 600px;
height: 1000px;
left: calc( 45% - 200px );
top:20%;
position: absolute;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 0px;
text-align: center;
box-sizing: border-box;
display: flex;
}
.content{
border: 4px solid red;
width: 600px;
word-wrap:break-word;
}
.img{
margin-left: 15px;
float: right;
display:inline-block;
clear:both;
}
<div class="box">
<div class="content">
<img src="http://placehold.it/150x250/000000/ffffff" class="img">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
</div>
</div>

Answer 2

To achieve the expected result, the <img> should go before <p> tag in your HTML. Here is an example:
.box {
width: 600px;
height: 1000px;
left: calc( 45% - 200px);
top: 20%;
position: absolute;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 0px;
text-align: center;
box-sizing: border-box;
display: flex;
}
.content {
border: 4px solid red;
width: 600px;
word-wrap: break-word;
}
.img {
margin-left: 15px;
float: right;
display: inline-block;
clear: both;
}
<div class="box">
<div class="content">
<img src="http://placehold.it/150x250/000000/ffffff" class="img">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
</div>
</div>

Answer 3

Either put the image before the p tag, or put it inside the p tag (see my snippet).
By the way: When you apply float to an element, inline-block will have no effect at all, and also the clearing does nothing in this particular case.
.box {
width: 600px;
height: 1000px;
left: calc( 45% - 200px);
top: 20%;
position: absolute;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 0px;
text-align: center;
box-sizing: border-box;
display: flex;
}
.content {
border: 4px solid red;
width: 600px;
text-align: left;
}
.img {
margin-left: 15px;
float: right;
}
<div class="box">
<div class="content">
<p><img src="http://placehold.it/150x250/000000/ffffff" class="img">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
</div>
</div>