title: How to expand search bar and hide other elements at same time?
body: <p>I am trying to make a search bar along with a header in one line. When I focus on the search bar I want it to expand full width and hide the header. I can expand the search bar but can't hide the header. I don't know what's wrong. Here's the code</p>
  
  <pre><code>&lt;! DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  
  &lt;style&gt;
            .header, div, .search{
                display: inline;
             }
            .search{
               width: 150px; 
               transition: all 1s ease-in-out;
               -webkit-transition: all 1s ease-in-out;
            }
            .search:focus{
               width: 100%;
            }
            .search:focus .header{
               display: none;
            }
        &lt;/style&gt;
  
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
  
  &lt;h1 class="header"&gt;myWebsite&lt;/h1&gt;
  
  
  &lt;div&gt;
       &lt;input type="text" class="search" name="search" placeholder="search..."&gt;
    &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So please help me out.</p>