Given an outermost "containing" div of arbitrary dimensions, I am looking for markup and css that will place two divs within it, and display them left to right, as follows. The first div, on the left, should have a fixed width of 200 pixels. It should take up 100% of the height of its parent. The second div, on the right, should take up the remaining width of the parent and also 100% of its height. 

So, given the following HTML for a parent container along with the two children: 

```
<div class="a">
  <div class="b">

  </div>
  <div class="c">

  </div>
</div>

```

And given this CSS for the parent: 

```
.a {
  height: 300px;
  width: 600px;
  background-color: gray;
} 

```

And given this incomplete CSS for the children: 

```
.b {
  background-color: red; 
}
.c {
 background-color: green;
} 

```

How can I complete the CSS for the children, in a way that does not depend on the exact height and width of the parent?

(It would also be permissible to add another element ".d" as the parent of the two children, for example as a flex container, giving the following HTML: 

```
<div class="a">
  <div class="d">
    <div class="b">

    </div>
    <div class="c">

    </div>
  </div>
</div>

```

The point is that I cannot modify the outermost element, but I can accomplish my goals with any combination of elements and css beneath it.

)