Kleines Bild wird auf dem Boden abgeschnitten wird aufgrund des Ende des div

Question

i ein jsfiddle erstellt: https://jsfiddle.net/ro2egff7/3/

html:

<div class="updated"> 
    a lot of text 
    <span style="display:block; position:relative; float:right;"> 
     <img src="~/Images/ic_cancel_black_18dp.png" > 
    </span> 
</div> 

<div class="updated" >a lot of text</div> 

.css-

.updated { 
    padding:5px 0px 5px 0px;  
    word-break: normal; 
    background-color: white; 
    top:0; 
    position:relative;  
} 

Dort können Sie sehen, dass mein Icon wegen des Endes der ersten Div abgeschnitten wird. Wie kann ich erreichen, dass das Symbol immer an der rechten Ecke des div ist, aber nicht abgeschnitten wird. Wenn die Zeile voller Text ist, ist es in Ordnung, dass eine neue Zeile, nur mit dem Symbol in der rechten Ecke, erstellt wird. Normalerweise sollte sich das Symbol jedoch am Ende des Textes in der gleichen Zeile befinden.

Danke für Ihre Hilfe.

Answer 1

Einen Clearfix des zweiten Div. Füge einfach clear: both; zu .updated hinzu

Answer 2

Statt Ihr Bild mit einer Spannweite von Verpackung, geben sie nur display:inline-block:

<div class="updated"> 
    a lot of text 
    <img src="~/Images/ic_cancel_black_18dp.png" style="display: inline-block" > 
</div> 

Here is an updated fiddle.