Facing css alignment problem


#1

Html

<ion-card>
    <ion-card-header>
      <ion-row justify-content-between>
        <ion-col col-auto>
          <img src="assets/img/icon2.png" item-left class="icon-img-service" />
        </ion-col>
        <ion-col>
          <ion-row text-wrap>
            <h2>Service Request</h2>
          </ion-row>
          <ion-row text-wrap>
            <ion-col col-6 class="col-align-service">
             <p  style="font-weight: bold;">Electricity</p>
             <p>Lighting Problem</p>
             <p  style="font-weight: bold;">Request No:25000</p>
             <p ></p>
            </ion-col>
            <ion-col col-6 class="col-left">
             <p style="font-weight: bold;">Status</p>
              <p ><ion-badge item-end>On hold</ion-badge></p>
            </ion-col>
          </ion-row>
         <ion-badge item-end class="more-btn">More..
</ion-badge>
        </ion-col>
 
      </ion-row>

    </ion-card-header>
  </ion-card>

.css

.col-left{

	border-left: 1px solid black;
	height: 57px;
	padding: 0px 0px 0px 8px;

}

.col-align{
	padding: 2px;
}

.more-btn {
	border-radius: 4px;
	color: #fff;
	background-color: #222;
	float: right;
}
.col-align-service{
	padding: 2px;
}


.icon-img-service{
	max-width: 70%;
	border: 0;
}

Screenshot_6
I want to remove space between icon and text

how can i do that.
please anyone help me out
Thnaks


#2

In the second column, try use col-8

<ion-col col-8>

Please, look this page, attention to how to use the structure:


#3

can you give me a example of code


#4

First of all, the structure needs to look like this:

<ion-grid>
  <ion-row>
    <ion-col>
      1 of 3
    </ion-col>
    <ion-col>
      2 of 3
    </ion-col>
    <ion-col>
      3 of 3
    </ion-col>
  </ion-row>
</ion-grid>

Ok?? grid -> row -> col

In your layout you have two columns, one to image, and second to text. In second try use col-8

<ion-grid>
  <ion-row>
    <ion-col>
      **IMAGE - LOGO**
    </ion-col>
    <ion-col col-8>
     **CONTENT**
    </ion-col>
  </ion-row>
</ion-grid>