title: Placing image and text on same line in a span
body: <p>Having some trouble with this.</p>
  
  <p>I followed this: <a href="https://stackoverflow.com/questions/13596821/css-align-images-and-text-on-same-line">CSS align images and text on same line</a> and a few other sources and not a whole lot of luck.</p>
  
  <p>With the link above, it suggests adding <code>float:left;clear:left;</code> as a solution. It partially works, but it pushes the icons to the far corner instead of keeping it to the center.
  HTML</p>
  
  <pre><code>&lt;div class="parent"&gt;
  &lt;span class="child"&gt;&lt;img class="clipart" src="http://waplasticsurgery.com/wp-content/uploads/2016/10/test_phone.png"&gt;(XXX)-XXX-XXXX&lt;/span&gt;
  &lt;div id="space"&gt;&lt;/div&gt;
  &lt;span class="child"&gt;Email Inquiry&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.parent{
    width:100%;
    height:76px;
    border:1px solid grey;
    border-radius:12px;
    display: -ms-flexbox;
    display:flexbox;
    display:flex;
    text-align:center;
    align-items:center;
    justify-content:center;
  }
  #space{
    width:10px;
    display:inline-block;
  }
  .child{
      font-family: 'Lato', sans-serif;
      font-size:14px;
      font-weight:bold;
    width:200px;
    height:45px;
    line-height:45px;
    display:inline-block;
    vertical-align:middle;
    border:2px solid #8CAAD2;
    border-radius:10px;
  }
  
  .clipart{
      vertical-align:middle;
      display:inline-block;
      float:left;
      clear:left;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/5xer7pmp/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p>The end goal is to have it vertical and horizontal aligned with the other text.</p>
  
  <p>All tips appreciated!</p>