Display inline image with Ionic - html

Question

I'm developing a small mobile app using Ionic and am struggling to display an image inline with a text.
<ion-view title="Beer">
<ion-content class="has-header">
<div class="row">
<div class="col text-center">
<h2>Brooklyn</h2>
</div>
</div>
<div class="row">
<div class="col col-40">
<p style="text-align: right;"><b>Country:</b></p>
</div>
<div class="col" >
<p style="text-align: left;"><img ng-src="img/flags-mini/us.png" /> United States</p>
</div>
</div>
</ion-content>
</ion-view>
As I'm very inexperienced with CSS I'm having a hard time to display the United States flag and have the < p > content vertically centralized. The way it's now the text is displayed at the bottom of the row and not in the center:
I have tried different things: tweaking the < 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.
Does anyone know how to get them aligned?

Answer 1

Here's one way how you can do it:
<ion-view title="Beer">
<ion-content class="has-header">
<div class="row">
<div class="col text-center">
<h2>Brooklyn</h2>
</div>
</div>
<div class="row">
<div class="col col-40">
<p style="text-align: right;"><b>Country:</b></p>
</div>
<div class="col" >
<img ng-src="img/flags-mini/us.png" style="float:left; margin-right: 5px;"/>
<p style="text-align: left;"> United States</p>
</div>
</div>
</ion-content>
</ion-view>
So, what did I do? I took the img tag out of the p tag and added the float:left; margin-right: 5px; CSS rules to this image. Rest is left intact.
You can see the example working on Codepen: http://codepen.io/anon/pen/JGwNqM