Auto grow table-cell element by content

Auto grow table-cell element by content

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. I would like a CSS solution for this problem. Is that
possible?
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 :(