title: CSS How to make the <span> same height as <input>?
body: <p><a href="https://i.stack.imgur.com/oNbQz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oNbQz.png" alt="enter image description here"></a></p>
  
  <p>I just simply want to make the Search button occupy full height as that of <code>input</code>. You can see the background color is applying only over the area of text. Is there any other way rather than applying padding to btn so it will automatically scale up if <code>input</code> padding is changed?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.GroupSearch {
    text-align: center;
  }
  
  .GroupSearch__input {
    width: 500px;
    padding: 10px 10px;
    vertical-align: middle;
  }
  
  .GroupSearch__search-btn {
    vertical-align: middle;
    background-color: rgb(0, 92, 128);
    color: white;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div className="GroupSearch"&gt;
    &lt;input className="GroupSearch__input" type="text" placeholder="Enter Your Group Name" /&gt;
    &lt;span className="GroupSearch__search-btn"&gt;Search&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>