I have a header with three elements like this:

```css
#container {
  width: 100%;
}
#container div {
  display: inline-block;
  text-align: center;
}
#container #left,
#container #right {
  width: 50px;
}
```

```html
<div id="container">
  <div id="left">L</div>
  <div id="center">CENTER</div>
  <div id="right">R</div>
</div>
```

What I'd like is to make it responsive so it covers the whole width of the window, but the side divs (left and right) need to preserve the same size so the only one that needs to change the size is the center one. How can I achieve this in CSS?