Display inline image with Ionic
<p>I'm developing a small mobile app using Ionic and am struggling to display an image inline with a text. </p>

<pre><code>            &lt;ion-view title="Beer"&gt;
                &lt;ion-content class="has-header"&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="col text-center"&gt;
                                &lt;h2&gt;Brooklyn&lt;/h2&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="col col-40"&gt;
                                &lt;p style="text-align: right;"&gt;&lt;b&gt;Country:&lt;/b&gt;&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;div class="col" &gt;
                                &lt;p style="text-align: left;"&gt;&lt;img ng-src="img/flags-mini/us.png" /&gt; United States&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/ion-content&gt;
            &lt;/ion-view&gt;
</code></pre>

<p>As I'm very inexperienced with CSS I'm having a hard time to display the United States flag and have the &lt; p > content vertically centralized. The way it's now the text is displayed at the bottom of the row and not in the center:</p>

<p><a href="https://i.stack.imgur.com/Qoz1L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qoz1L.png" alt="enter image description here"></a></p>

<p>I have tried different things: tweaking the &lt; div>'s to define inline css styles to try to bring the text up a bit, moving the flag to a separate col, defining margins, etc. Nothing worked. </p>

<p>Does anyone know how to get them aligned?</p>