Floating div's with images and variable length text

I am having an issues getting my HTML to format the way i need it too.

I am creating div dynamically (parent). In each div there are two divs inside (div one & two).

Div one is text that can be any length or variable length. Div two contains an image.

Regardless of the size of the parent div, the text needs to fill as much width as possible. But i need the 2nd div with the image, to float开发者_JS百科 above the text right at the end of the line. I also need all the image divs, to vertically line up.

This parent div is re-sizable and can get either smaller of bigger but the floating image must always be sitting in the sentence line but on the right of the container.

If the text is wider than the div parent, the image needs to float against right hand side of the parent container on the same line as the text. If the text is smaller than the parent the image must still be on the right hand side of the parent div.

Think of it as a floating image full stop, if that makes sense. where every sentence has its full stop in one long vertical line.

I have tried both divs and tables but am getting garbled results.

Here is my current code:

  <div>
    <div style="display: inline; float: left;">
        Text Goes here</div>
    <div style="display: inline; float: right; z-index: 1000;">
        <img src="info.png" /></div>
</div>
<div>
    <div style="display: inline; float: left;">
        Next line of Text Goes here</div>
    <div style="display: inline; float: right; z-index: 1000;">
        <img src="info.png" /></div>
</div>

Thanks

I think it's a bit hard to visualize what result you're trying to get. Can you draw a diagram that illustrates your desired results?

As best I can tell, you're looking for this (view results at JSFiddle): http://jsfiddle.net/kcschaefer/GYQea/9/

Code is:

<div id="parent" style="width: 100%;">
<div>
        First text goes here
         <img src="http://www.kendraschaefer.com/images/info.png" style="float:right; z-index: 1000;" />
<div>
    <div style="clear: both;"></div>

<div>
        Next line of  really long text that demonstrates how the float will work would go  right here, and you can see that the info thingie goes all the way to  the end of the div, no matter how long this is.
         <img src="http://www.kendraschaefer.com/images/info.png" style="float:right; z-index: 1000;" />

<div>
</div><!-- end parent -->