Put 2 divs within the same div, make the left one auto-ellipsis, and the right one float right - css-float

Question

I'm not good at float, so would appreciate any detailed answers, though I (and the customer) would be happy simply for a quick fix.
I have the following structure. (I cut out the parts I think don't matter, but copied the whole div at the bottom of the question). This is inside a much bigger div whose width is resizable by the user.
<div style="height: 16px; top: 0px; left: 0px; right: 0px; overflow: hidden;">
<div class="icon ui-icon ui-icon-triangle-1-e"></div>
<div>
<div style="white-space: nowrap; overflow: hidden; position: relative; text-overflow: ellipsis;float: left;">Really long title txt</div>
<div style="float: right; white-space: nowrap; overflow: hidden; position: relative; font-size: x-small; padding-right: 5px;">
<i>extra information 1</i>
</div>
</div>
</div>
I need the behavior to be:
The second div needs to stay on the right as the panel expands
The second div needs to completely disappear if the panel gets too small to display it in full.
The first div needs to auto-ellipsis if the panel gets too small.
If I remove the float from the first div, the second div seems to completely disappear. (Chrome's dev tools shows that its baseline is pretty much below the rest of the line, so it gets clipped.) However, if I shrink the panel, the first div does properly auto-ellipsis.
If I leave the float in the first div, the second div displays properly, and disappears properly when the panel gets too small. However, the first div then moves down so its baseline is below the rest of the line (and gets mostly clipped, and still shows the icon, so looks terrible).
The questions: Why is it behaving this way, and what do I do to make it behave the way I need?
Here's the full div, in case I trimmed out too much information above:
<div class="TreeViewNodeGroup ui-state-active ui-icon-check" unselectable="on" style="height: 16px; top: 0px; left: 0px; right: 0px; overflow: hidden;">
<div class="icon ui-icon ui-icon-triangle-1-e" aria-hidden="false" style="border: 0px solid blue;"></div>
<div class="icon" aria-hidden="true" style="border: 0px solid green; display: none;"></div>
<div class="icon" aria-hidden="true" style="border: 0px solid red; display: none;"></div>
<div>
<div unselectable="on" style="border: 0px transparent; white-space: nowrap; overflow: hidden; position: relative; text-overflow: ellipsis;float: left;">Really long title txt</div>
<div unselectable="on" class="rangeDiv" style="border: 0px transparent; float: right; white-space: nowrap; overflow: hidden; position: relative; font-size: x-small; padding-right: 5px;">
<i>extra information 1</i>
</div>
</div>
</div>

Answer 1

My coworker came up with the fix. The problem was in the icons before the divs. They needed to have their float removed, and position set to absolute. We set a margin-left on the first element:
<div class="TreeViewNodeGroup ui-state-active ui-icon-check" unselectable="on" style="height: 16px; top: 0px; left: 0px; right: 0px; overflow: hidden;">
<div class="icon ui-icon ui-icon-triangle-1-se" aria-hidden="false" style="border: 0px solid blue; position: absolute;"></div>
<div class="icon" aria-hidden="true" style="border: 0px solid green; display: none; position: absolute;"></div>
<div class="icon" aria-hidden="true" style="border: 0px solid red; display: none; position: absolute;"></div>
<div>
<div unselectable="on" style="border: 0px transparent; float: left; white-space: nowrap; overflow: hidden; position: relative; margin-left: 15px;">Really long title txt</div>
<div unselectable="on" class="rangeDiv" style="border: 0px transparent; float: right; white-space: nowrap; overflow: hidden; position: relative; font-size: x-small; padding-right: 5px;">
<i>extra information 1</i>
</div>
</div>
</div>