How to change another div css when focus another

Question

I'm trying to change the div #header-search when focus the input #search. so when people focus the search field get bigger!

 <div id="header-search">

  <form >
      <div class="input-box">
         <input id="search" type="search" name="q" value="" class="input-text required-entry" maxlength="128" placeholder="Search" autocomplete="off">
    <button type="submit" title="Search" class="button search-button"></button>
     </div>

     <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>

  </form>
       </div>

Style:

 #header-search{
display: block;
position: absolute;
top: 0px;
left: 200px;
width: 40%;
height: 80px;}

 #search{
width: 100%;
height: 80px;
}

 #search:focus #header-search{
left: 0px;
width: 100%;

}