Embedded divs in header: css issue

I am trying to create the following structure using embedded divs inside a header:

• The height and width of the red part is known and fix
• The height of the green rectangle is known and fix
• The overall width of the frame can vary, but is never smaller than the red part

I have tried with the following html code:

<header id="header">
  <div id="yellowAndGreen">
      <div id="yellow"></div>
      <div id="green"></div>
  </div>
  <div id="red"></div>
</header>

and the following CSS:

#header {
    width: 400px;  
}
#yellowAndGreen {

}

#yellow {    
    background-color: yelow;
}

#green {    
    background-color: green;
    height: 40px;
}

#red {    
    height: 150px;
    width: 150px;
    background-color: red;
}

but it does not work. I have created a JsFiddle. Can anyone modify it to create what I am looking for?