How to place two divs side by side where one sized to fit and other takes up remaining space?

Question

This should be easy... why is this not easy?

I am looking to have 2 divs side by side, where one div will auto size to the content inside and the second div will si

Answer 1

#full_width_div {
    background-color:#5B8587;
    width:100%;
}
.left_part {
    background:red;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.right_part {
   background:yellow;   
   float:right;
   white-space:nowrap;
}

  

     Size to fit me completely
  
  

     I am long and should be truncated once I meet up with the size to me text.
  
    

  

My mistake was I was incorrectly floating my "fit to" content. By moving the div to the correct location in the DOM the content is floated correctly, and the "remaining sized" div will now correctly take up the remaining space.

I also wanted to force the divs to occupy ONE line, which is why I have set such strict CSS on the "remaining sized" div content. overflow:hidden; text-overflow:ellipsis;