on input :focus, set also focus to sibling elements without using javascript

Question

My pen: https://codepen.io/helloworld/pen/XopoYa

When I click into the input control the background gets gray.

What I want is that the left and right colum also gets gray.

How is that possible without using JS?

HTML

 <div id="container">
  <div class="column left">
    left
  </div>
  <input type="search" class="column center">

  </input>
  <div class="column right">
  right
  </div>
</div>

CSS

#container {
    display: flex;
    background:orange;
   flex:1;
  width:100%;
  height:50px;
} 

.column.left {
  background:blue;
    width: 230px;
    flex: 0 0 230px;
}
.column.right {
    width: 230px;
    flex: 0 0 230px;
    border-left: 1px solid #eee;
  background: red;
}
.column.center {
    border-left: 1px solid #eee;
    flex-grow:1;
  background:white;
  border: 1px blue solid;

}
.column.center:focus{
  background:gray;
}

Answer 1

i changed html code orders and i made with order. order is a flexbox property.

#container {
    display: flex;
    background:orange;
   flex:1;
  width:100%;
  height:50px;
} 

.column.left {
  background:blue;
    width: 230px;
    flex: 0 0 230px;
  order:1;
}
.column.right {
    width: 230px;
    flex: 0 0 230px;
    border-left: 1px solid #eee;
  background: red;
  order:3;
}
.column.center {
    border-left: 1px solid #eee;
    flex-grow:1;
  background:white;
  border: 1px blue solid;
  order:2;
  
}
.column.center:focus,
.column.center:focus + .left,
.column.center:focus + .left + .right{
  background:gray;
}

<div id="container">
    <input type="search" class="column center">
    
  </input>
  <div class="column left">
    left
  </div>
  <div class="column right">
  right
  </div>
</div>

Answer 2

To get this effect (without changing your markup) , you need a new pseudo-class focus-whitin, that is supported in modern browsers (that is, Chrome, Safari, Opera and Firefox )

#container {
    display: flex;
    background:orange;
   flex:1;
  width:100%;
  height:50px;
} 

.column.left {
  background:blue;
    width: 230px;
    flex: 0 0 230px;
}
.column.right {
    width: 230px;
    flex: 0 0 230px;
    border-left: 1px solid #eee;
  background: red;
}
.column.center {
    border-left: 1px solid #eee;
    flex-grow:1;
  background:white;
  border: 1px blue solid;
  
}
.column.center:focus{
  background:gray;
}
#container:focus-within .left,
#container:focus-within .right{
  background-color: gray;
}

<div id="container">
  <div class="column left">
    left
  </div>
  <input type="search" class="column center">
    
  </input>
  <div class="column right">
  right
  </div>
</div>