Float image to the top right in multi-line text - css

Question

I want the icon to stay at the top right. I have tried many things but nothing seems to work. It is only an issue when the text is really long or on a smaller device.
.container {
float: left;
position: relative;
width: 50%;
}
.image-right {
float: right;
position: relative;
}
<div class="container">
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
<span class="image-right">
<img style="width:13px; height:13px" src="http://findicons.com/files/icons/2354/dusseldorf/32/plus.png">
</span>
</h3>
</div>

Answer 1

Put the image before the text inside the h3 tag. As it says on http://www.w3schools.com/css/css_float.asp,
Elements after a floating element will flow around it.
<style>
.container{
float: left;
position: relative;
width: 50%;
}
.image-right {
float: right;
position: relative;
}
</style>
</head>
<div class="container">
<h3>
<img style="width:13px; height:13px" src="http://findicons.com/files/icons/2354/dusseldorf/32/plus.png"
class="image-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</h3>
</div>

Answer 2

Here is an answer. You should use position: absolute;
.container{
float: left;
position: relative;
width: 50%;
}
.container h3 {
position: relative;
}
.image-right {
float: right;
top: 0;
right: 0;
position: absolute;
}
<div class="container">
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
<span class="image-right">
<img style="width:13px; height:13px" src="http://findicons.com/files/icons/2354/dusseldorf/32/plus.png">
</span>
</h3>
</div>