Auto grow table-cell element by content - html

Question

I'm trying to make a table with the display:table-cell and display:table css properties. It looks like this:
My problem is that the orange table cell needs to be just as big as its inner content. Sometimes the green boxes are 100px and sometimes they are 200px. The .left should auto-grow. I would like a CSS solution for this problem. Is that possible?
It should look like this:
Here's the JSFiddle. And here's the code:
Html:
<div class="wrapper">
<div class="left">
<div class="tree">A
<br/>- B
<br/>- C
<br/>
</div>
<div class="filter">F
<br/>F2
<br/>
</div>
</div>
<div class="content">A A A
<br/>B B B
<br/>C C C
<br/>
</div>
<div class="right">S
<br/>S2
<br/>
</div>
</div>
CSS:
div {
margin:2px;
padding:2px;
}
.wrapper {
width:700px;
border:solid 1px red;
display:table;
table-layout:fixed;
}
.right {
display:table-cell;
border:solid 1px blue;
width:100px;
}
.left {
display:table-cell;
border:dashed 1px orange;
}
.content {
display:table-cell;
}
.tree, .filter {
display:block;
width:100px;
border:solid 1px green;
}
The .left doesn't play nice :(

Answer 1

Edit2
Place width: 100px on your left class and remove table-layout:fixed; from wrapper class
FIDDLE
EDIT
In your markup remove whitespaces in .left class when it is empty like so:
<div class="left"></div> or also like:
<div class="left"><!-- some comment is also ok--></div>
This is necessary because otherwise the :empty selector won't consider this element empty.
In css add this:
.left:empty
{
display:none;
}
new FIDDLE
How about wrapping the content of your .left class within another div - like so:
<div class="left">
<div class="inner"></div>
</div>
Then, if you like, you could remove the border if .inner has no content - like so:
.inner:empty
{
border:none;
}
FIDDLE

Answer 2

You can change the div containing the left class in your HTML to a span
<span class="left">
<!-- no content, should not be displayed !-->
</span>
Then change your CSS changing your display from table-cell to inline-block
.left {
display:inline-block;
border:dashed 1px orange;
}
You could also try this...
FIDDLE Again