title: IONIC Card layout styling seems not centered and not equally spaced
body: <p>I am building IONIC app and made a card layout as below. </p>
  
  <pre><code>&lt;ion-content padding&gt;
          &lt;ion-card *ngFor="let book of booksData.books; let i=index"&gt;
                &lt;ion-row&gt;
                  &lt;ion-col col-3&gt;
                      &lt;ion-avatar item-start&gt;
                      &lt;img src="/../../img/authorImage.png"&gt;
                      &lt;/ion-avatar&gt;
                  &lt;/ion-col&gt;
                &lt;ion-col col-7&gt;
                  &lt;ion-card-header&gt;
                    #{‌{i+1}}
                  &lt;/ion-card-header&gt;
                    &lt;ion-card-content&gt;
                      &lt;p&gt;{‌{book.text}}&lt;/p&gt;
                      &lt;p&gt;{‌{book.person}}&lt;/p&gt;
                    &lt;/ion-card-content&gt;
                  &lt;/ion-col&gt;
                  &lt;ion-col col-2&gt;
                      &lt;ion-row&gt;
                      &lt;ion-icon name="thumbs-up"&gt;&lt;/ion-icon&gt;
                      &lt;/ion-row&gt;
                      &lt;ion-row&gt;
                      &lt;ion-icon name="thumbs-down"&gt;&lt;/ion-icon&gt;
                      &lt;/ion-row&gt;
                  &lt;/ion-col&gt;
                  &lt;/ion-row&gt;
                  &lt;/ion-card&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>The card is splitted into three columns (as expected), how ever I am facing the below issue</p>
  
  <p>The thumbs up and thumbs down icon are displaying but not taking the full available height . instead they are taking a fraction area of the column only. How can I make sure that the two icons take half the width of the Row of that specific column.</p>
  
  <p>Any inputs on how to fix this please. </p>
  
  <p><a href="https://i.stack.imgur.com/Q6lUg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q6lUg.png" alt="enter image description here"></a></p>