title: How to align elements in ionic 2 using ion-row and ion-col?
body: <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>