alignment - How to rearrange these elements with CSS? -

codepen: http://codepen.io/leongaban/pen/ndfgs

so have table 2 columns, left column being 60% width , right being 40%.

inside of left column have div needs centered, , inside div 3 other elements (a span list, span test , span list).

these elements need floated side side, until browser resized small enough media queries make spans end on top of each other.

this perfect example of want achieve:

however problem comes play. in order make sure div contains 3 elements remains centered inside of left table column. have set fixed width on it:

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

however if name, title or company of elements long, break layout.

my codepen example of layout: http://codepen.io/leongaban/pen/ndfgs

example of layout working:

example of layout broken because name long

so i'm stuck, if name long 1 of elements (the 3rd span) thrown down onto 2nd row unintentionally. because have fixed width.

the solution can think of use jquery check widths of spans, , if total of widths added more width of floating container re-arrange elements intentionally.

how go problem?

i wish use flex-box, have support @ least ie8. :(

giving span "#the_requested" specific width cause overflow go new line. example

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

example: http://codepen.io/anon/pen/zihca

obviously want make widths of span on left match span on right. span left+center+right should parent's width.