title: CSS Search Box Expanding
body: <p><a href="https://codepen.io/LukzzXB/pen/yrMjxg" rel="nofollow noreferrer">https://codepen.io/LukzzXB/pen/yrMjxg</a></p>
  
  <p>So i am coding a text box using CSS. If you see the link above you'll see that when i hover over the button the 'Type to search' works fine as it goes to the right. </p>
  
  <p>Now i'm just trying to get the background of the button to go with the text box aswell.</p>
  
  <p>So the goal here is to try get the box to expand right and only right. </p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
    &lt;script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"&gt;
    &lt;/script&gt;`enter code here`
    &lt;/head&gt;
    &lt;head&gt;
      &lt;title&gt;Using CCS for the first time&lt;/title&gt;
    &lt;/head&gt;  
    &lt;head&gt;
    &lt;style&gt;
      h1 {
  
      color: orange;
      text-align: left;
  
      }
  
      &lt;/style&gt;
      &lt;/head&gt;
        &lt;body&gt;
      &lt;h1&gt;
        &lt;span style="font-family:Arial"&gt;Hello and welcome to a search box&lt;/span&gt;
      &lt;/h1&gt;
        &lt;/body&gt;  
  
  &lt;head&gt;
  &lt;body&gt;
  &lt;div class="search-box"&gt;
  
    &lt;input class="search-txt" type="text" name="" placeholder="Type to search"&gt;
    &lt;a class="search-btn" href="#"&gt;
    &lt;i class="fas fa-search"&gt;&lt;/i&gt;
    &lt;/a&gt;
  &lt;/div&gt;  
  &lt;/head&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  body {
      margin: 0;
      padding: 0;
      background: red;
     }
  
  .search-box{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #2f3640;
      height: 40px;
      border-radius: 40px;
      padding: 10px;
     }
  
     .search-box:hover &gt; .search-txt{
  
         width: 240px;
         padding: 0 6px;
     }
  
     .search-box:hover &gt; .search-btn{
      background: white;
  
  }
  
     .search-btn{
      float: left;
      color: red;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: none;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 0.4;   
     }
  
     .search-txt{
      position: absolute;
      float: right;
      border: none;
      background: none;
      outline: none;
      padding: 0;
      color: white;
      font-size: 16px;
      transition: 0.4s;
      line-height: 40px;
      width: 0px;
     }
  </code></pre>