How to rearrange these elements with CSS?

Question

CodePen: http://codepen.io/leongaban/pen/ndFgs

So I have a table with 2 columns, the left column being 60% width and the right being 40%.

Inside of the left column I have a div that needs to be centered, and inside that div are 3 other elements (a span with a list, another span with test and another span with a list).

These elements need to be floated side by side, until the browser is resized small enough for media queries to then make the spans end up on top of each other.

This is a perfect example of what I want to achieve:

However this is where my problem comes into play. In order to make sure that the div that contains those 3 elements remains centered inside of the left table column. I have to set a fixed width on it:

margin: 0 auto;
max-width: 200px; // or width: 70%;

However if a name, title or company for any of the elements is really long, it will break the layout.

My CodePen example of my layout: http://codepen.io/leongaban/pen/ndFgs

Example of layout working:

Example of layout broken because a name is too long

So this is where I'm stuck, if a name is too long one of the elements (the 3rd span) will get thrown down onto a 2nd row unintentionally. Because I have a fixed width.

The only solution I can think of is to use jQuery to check the widths of all the spans, and if the total of the widths added up is more then the width of the floating container then re-arrange the elements intentionally.

How would you go about this problem?

I wish I could use Flex-box, but we have to support at least IE8. :(

Answer 1

Giving the span "#the_requested" a specific width will cause overflow to go to a new line. For example

#the_requested {
background: purple;
width: 168px;

}

Example: http://codepen.io/anon/pen/zIhca

Obviously you would want to make the widths of the span on the left match the span on the right. Then the span left+center+right should be the parent's width.