title: Div and input not aligned properly in Safari
body: <p>Got a problem with aligning a div and an input next to each other to create that classic input with icon. However, when I use Safari/Mac and Safari/iOS, it appears like this:</p>
  
  <p><a href="http://i.stack.imgur.com/Rfmrf.png" rel="nofollow">Broken in Safari</a></p>
  
  <p>... and I just can't get my head around it! It's fine on Chrome and I've tried playing around with the floats, vertical align (don't know how relevant this is), but still nothing.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="input-with-icon"&gt;
      &lt;div class="icon"&gt;X&lt;/div&gt;
      &lt;div class="input"&gt;&lt;input type="text" placeholder="Start typing to find a customer..."&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.input-with-icon .icon {
      float: left;
      background-color: #fff;
      border-top: 1px solid #dcdcdc;
      border-bottom: 1px solid #dcdcdc;
      border-left: 1px solid #dcdcdc;
      padding: 13px 0 14px 10px;
      color: grey;
      font-size: 14px;
      border-radius: 5px 0 0 5px;
  }
  
  .input-with-icon .input {
      overflow: hidden;
  }
  
  .input-with-icon input[type="text"]{
      -webkit-appearance: none;
      width: 100%;
      outline: none;
      font-size: 16px;
      padding: 13px;
      font-family: 'Roboto Light', sans-serif;
      border-top: 1px solid #dcdcdc;
      border-right: 1px solid #dcdcdc;
      border-bottom: 1px solid #dcdcdc;
      border-left: 0;
      border-radius: 0 5px 5px 0;
  }
  </code></pre>
  
  <p>Here's a fiddle if this helps you guys with my code - for some reason the right border doesn't want to work on the fiddle but not fussed about that bit as it's fine everywhere else.</p>
  
  <p><a href="https://jsfiddle.net/r08gxre3/1/" rel="nofollow">https://jsfiddle.net/r08gxre3/1/</a></p>
  
  <p>Any help would be much appreciated, thanks guys! :)</p>