Placing image and text on same line in a span
<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>