dynamical width of div stacks - html

Question

I have a stack of div boxes as follows:
My goal is: Box B and C should be of the same width, and box A should be the width of B and C. The content of each box should be shown without line break. They should be arranged as in the picture. The content of box A, B and C is created dynamically.
I almost achieved this (see code at bottom) by putting these 3 boxes in an display:inline-block and setting width:50% for box B and C. This works good in some cases, but when the content of box B is too large, I get this result:
I understand the outcome, since the total width is determined by box A and box B has width: 50%. However, I would like that box B gets stretched so that no line break is needed, like this:
How can I achieve this?
This is the code that produces the image (see this jsFiddle):
<style>
.container{
display: inline-block;
text-align:center;
padding: 5px;
border:dashed red;
}
.head{
border:solid;
background-color: yellow;
padding: 30px;
}
.item{
width: 50%;
display: inline-block;
border:solid;
box-sizing: border-box;
padding: 5px;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
}
</style>
<div class="container">
<div class="head">
A
</div>
<div>
<div class="item red">
B
</div><!--
--><div class="item green">
C
</div>
</div>
</div>

Answer 1

A minor change on structure and flexbox can do that.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
display: inline-flex;
text-align: center;
padding: 5px;
border: dashed red;
flex-wrap: wrap
}
.head {
border: solid;
background-color: yellow;
flex: 0 0 100%;
padding: 30px;
}
.item {
width: 50%;
display: inline-block;
border: solid;
box-sizing: border-box;
padding: 5px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
<div class="container">
<div class="head">
Very very long text
</div>
<div class="item red">
Also very very long text
</div>
<div class="item green">
C
</div>
</div>
Or...if you want the bottom divs wrapped...still flexbox
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
display: inline-flex;
text-align: center;
padding: 5px;
border: dashed red;
flex-wrap: wrap
}
.head {
border: solid;
background-color: yellow;
flex: 0 0 100%;
padding: 30px;
}
.wrap {
flex: 0 0 100%;
display: flex;
}
.item {
width: 50%;
display: inline-block;
border: solid;
box-sizing: border-box;
padding: 5px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
}
<div class="container">
<div class="head">
Very very long text
</div>
<div class="wrap">
<div class="item red">
Also very very long text
</div>
<div class="item green">
C
</div>
</div>
</div>