styling divs to have 2 columns with dynamic widths

Question

I am sure this has been covered but I'm not sure what to search for.

I have 2 divs inside of 1 div. The 2 inner divs I float:left so there are 2 columns. The first div is of class .username. The second div is of class .commentText. The outer div is called .comment:

.comment{
  border: 0px;
  clear: both;
}

.commentText, .username {
  float:left;
}

However if the sum of the content of the 2 inner divs is greater than the width of the outer div, then the second inner div drops below the 1st inner div.

For example: in the picture below the timestamps are in username div. The comment is in commentText div. Notice the bottom comment bumps below the timestamp.

What I get:

What I want:

What I would like is for the commentText on the bottom comment to maintain the width that it would be if it were only 1 line and just grow vertically. Also note that the .username div in each comment has different widths.

THANKS!

EDIT: I just found a decent solution in which I use max-width: 20% for .username and max-width: 79% for .commentText, but the problem with this is I don't want to limit the width of the username div. and if the username is short and the comment is long, then it doesn't fill all the way to the right side of the outer div.

Answer 1

I understand it isn't cross compatible on all browsers from all epochs but @bybe gave me a suggestion with a fiddle to use display:table-cell. This works great.

.commentText, .username {
    display:table-cell;
    margin:0px 0px 10px 0px;
}

.username {
    padding: 0px 15px 0px 0px;
    white-space:nowrap;
}