How to align elements in ionic 2 using ion-row and ion-col?
<p>I'm trying to achieve a list similar to the one shown here:
<a href="http://arunsfolio.com/wp-content/uploads/2015/04/list-petro.png" rel="noreferrer">http://arunsfolio.com/wp-content/uploads/2015/04/list-petro.png</a></p>

<p>I'm not sure if I am missing something in sass.</p>

<p>This is the code: </p>

<pre><code> &lt;ion-row&gt;

    &lt;ion-col width-40&gt;
        &lt;h4&gt;Esso&lt;/h4&gt;
        &lt;p&gt;Ungrester - 54&lt;/p&gt;
        &lt;p&gt;84859 - munch&lt;/p&gt;
    &lt;/ion-col&gt;
    &lt;ion-col width-40&gt;
        &lt;div class="priceStyle"&gt;
            &lt;div class="priceChild"&gt;
                $123
            &lt;/div&gt;

        &lt;/div&gt;
    &lt;/ion-col&gt;
    &lt;ion-col width-10&gt;
       &lt;div&gt;
        12KM
      &lt;/div&gt;
    &lt;/ion-col&gt;
&lt;/ion-row&gt;


SCSS:
.priceStyle {
        background-color: lightblue;
        display: flex;
        flex-direction: column;

        width: 100px; 
        height: 50px; 
        border-radius: 2px;


    }

.priceChild {
        font-weight: bold;
        font-size: 1.5em;
        color: white;
        margin: 0;
        flex: 1;
        justify-content: flex-end;
        align-items: flex-end;
    }
</code></pre>

<p>My code isn't aligning the elements in the centre.</p>

<p>This is how it is displayed right now:</p>

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

<p>Thanks.</p>