Horizontal align two adjacent divs with left oriented text - html

Question

I want to horizontal align a div that consists of two other divs:
One from the left, that will contain an image.
Other from the right, that div will contain text, aligned to the left.
The alignment will be relative to a container, and the centered div should expand to a maximum width (and not take the entire container's width).
This pen describes what i tried to do using table layout
This is the HTML
<div class="container">
<div class="centered">
<div class="left">
left text
</div>
<div class="right">
very very very long right text
</div>
</div>
</diV>
And the CSS
.container {
width: 200px;
background-color: red;
}
.centered {
display: table;
margin: 0 auto;
max-width: 100px;
}
.left {
background-color: green;
display: table-cell;
vertical-align: middle;
}
.right {
background-color: blue;
display: table-cell;
vertical-align: middle;
}
As you can see, the space on the right of the blue area is part of the centered div (the green+blue area), but it makes the div's content not to be centered. What i would like is the blue area to take the width of the longest line in it

Answer 1

If you're wanting the blue area to dynamically grow with the text inside of it while retaining a centered area of content would the following be what you're looking for?
.container {
width: 200px;
background-color: red;
padding:0 20px;
}
.centered {
display: table;
margin: 0 auto;
max-width: 100px;
}
.left {
background-color: green;
display: table-cell;
vertical-align: middle;
color:#fff;
}
.right {
background-color: blue;
display: block;
vertical-align: middle;
width:inherit;
color:#fff;
}
<div class="container">
<div class="centered">
<div class="left">
left text
</div>
<div class="right">
very very very long right text very very very long right textvery very very long right textvery very very long right textvery very very long right textvery very very long right text
</div>
</div>
</div>