title: Keep label element prevents my search bar corners from rounding?
body: <h1>Problem</h1>
  <p>If I keep my label element (and from what I've read, every <code>input</code> element should have a label element, even if you're not using it, for disabled users), my search box corners on the left-hand side aren't being rounded.</p>
  <p>Also, you can tell (if you look close enough) that my search button on the right side isn't aligning perfectly with the rest of the search bar.</p>
  <p>Delete the entire <code>label</code> element, and it looks perfectly fine. However, I want to make sure I am practicing good coding manners/behaviors.</p>
  <p>How can I make my search bar look the way it looks when you delete the <code>label</code> element, while still using the <code>label</code> element?</p>
  <h1>Troubleshooting</h1>
  <ul>
  <li>I have tried using CSS to style the entire bar, to no avail.</li>
  <li>I have tried placing the <code>input</code> element, the <code>button</code> element, and the
  <code>span</code> element inside of the <code>label</code> element to no avail.</li>
  </ul>
  <h1>My Code</h1>
  <p><a href="https://jsfiddle.net/12o0xafr/" rel="nofollow noreferrer">JSFiddle</a></p>