How can I use CSS to modify a preceding div?

Question

So, I apologize, but I really screwed up my question. I modified the code in the snippet.

Hovering the box on the left is not really the issue. Due to the box on the right being a sibling, I can effect this blue box by hovering the red box on the left. However, my challenge is, I want to be able to do the same thing, only in reverse order. I want to also be able to hover the blue box on the right and have the same thing happen to the red box on the left. It should shrink by the same amount the blue box grows.

I know I cannot use the sibling selector to target a preceding element. Is there any way with CSS, or do I need to use JavaScript (which I do not know)?

ORIGINAL QUESTION BELOW:

There are two boxes, one red, one blue. When you hover the red box, the blue box grows by 10px in the width and moves left by 10px. This makes it appear to grow to the left. My challenge is, when the box on the right grows, I want the red box, at left, to shrink by the same 10px, so to appear that the larger blue box is squeezing the red box to shrink.

The sibling selector works fine for animating the blue box, but this will not work for the div that precedes it. Is JavaScript the only answer to this?

.container {
  margin-top: 50px;
  width: 500px;
  height: 300px;
  background-color: green;
}

#box {
  width: 200px;
  height: 200px;
  margin-left: 40px;
  background-color: red;
  float: left;
}

#box2 {
  margin-left: 20px;
  width: 200px;
  height: 200px;
  background-color: blue;
  color: #fff;
  float: left;
}

#box:hover {
  width: 230px;
}

#box:hover+#box2 {
  width: 170px;
  position: relative;
  left: 10px;
  margin-left: 10px;
}

<div class="container">
  <div id="box">BOX 1</div>
  <div id="box2">BOX 2</div>
</div>