Align Ionicons with Text

Question

I am not sure how to align my Ionicons with the text. I found this but I am rarely working with CSS so can not make sense of it...

How can I get the vertical center of the ionicon aligned with the text inside the ion-col item? The alignment of the first ion-col cell is broken too...

Code

        <ion-row>
            <ion-col size="3">
                23C
            </ion-col>
            <ion-col size="3">Text
                <ion-icon name="arrow-up-outline" size="small"
                    [ngStyle]="{'transform': 'rotate(180deg)'}">
                </ion-icon>
            </ion-col>
            <ion-col size="3">Text
                <ion-icon name="arrow-up-outline" size="small"
                    [ngStyle]="{'transform': 'rotate(45deg)'}">
                </ion-icon>
            </ion-col>
        </ion-row>

Answer 1

You can use flexbox to align your icons and texts. I gave a class name to ion-col to apply flexbox only to that elements.

https://i.stack.imgur.com/TY7MW.jpg

<ion-row>
  <ion-col size="3">
      23C
  </ion-col>
  <ion-col class="my-class" size="3">Text
      <ion-icon name="arrow-up-outline" size="small" [ngStyle]="{'transform': 'rotate(180deg)'}"></ion-icon>
  </ion-col>
  <ion-col class="my-class" size="3">Text
      <ion-icon name="arrow-up-outline" size="small" [ngStyle]="{'transform': 'rotate(45deg)'}"></ion-icon>
  </ion-col>
</ion-row>

  ion-row {
    display:flex; 
  }
  ion-col {
    padding:10px;
  }
  .my-class {
    display: flex;    
  }