Card design issue

Ionic Framework ionic-v3
1

I want to design like this

5C9534D8-409A-4B92-AF06-01A89132B965
5C9534D8-409A-4B92-AF06-01A89132B965.jpg1080×1920 1.42 MB

.html

<ion-grid>
  <ion-row>
    <ion-col>
      <img class="service-icon" src="assets/img/icon2.png" item-left/>
    </ion-col>
    <ion-col col-8>
       <p class="rent-section">DUES</p>
      <ion-row>
      <ion-col col-6>
        <p class="rent-text">RENT</p>
        <p>25000</p>
        <p><ion-badge>Paid</ion-badge></p>
      </ion-col>
      <ion-col col-6 class="col-left-rent">
        <p class="utilities-text">UTILITIES</p>
        <p>25000</p>
         <p><ion-badge>Due</ion-badge></p>
      </ion-col>
      </ion-row>

    </ion-col>
  </ion-row>
</ion-grid>

.css

.card-md .rent-section{

	text-align: center; 
	font-weight: bold;
	font-size: 20px;
}

.card-md .rent-text{
	margin: 0 0 2px;
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1.5;
	color: #222;
	margin-top: 0px;
	float: right;
}

.card-md .utilities-text{
		margin: 0 0 2px;
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1.5;
	color: #222;
	margin-top: 0px;
	
}
.col-left-rent{

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

}

below my output
demo12

how can i do that same as demo images.
please help me out

2

Here you go. But try to figure it out yourself by learning, we won’t write the whole code for you all the time. Just try to play around using inspect element in chrome.
Cheers!!

 <ion-grid>
      <ion-row>
        <ion-col>
          <img class="service-icon" src="assets/img/icon2.png" item-left/>
        </ion-col>
        <ion-col col-8>
           <p class="rent-section">DUES</p>
          <ion-row>
          <ion-col col-6>
            <p class="rent-text">RENT</p>
            <p>25000</p>
            <p><ion-badge class="green">Paid</ion-badge></p>
          </ion-col>
          <ion-col col-6 class="col-left-rent">
            <p class="utilities-text">UTILITIES</p>
            <p style="text-align: center">25000</p>
             <p><ion-badge class="red">Due</ion-badge></p>
          </ion-col>
          </ion-row>
    
        </ion-col>
      </ion-row>
    </ion-grid>

css

 .rent-section{

        // text-align: center; 
        font-weight: bold;
        font-size: 20px;
    }
    
    .rent-text{
        margin: 0 0 2px;
        font-size: 1.4rem;
        font-weight: normal;
        line-height: 1.5;
        color: #222;
        margin-top: 0px;
       
    }
    
    .utilities-text{
            margin: 0 0 2px;
        font-size: 1.4rem;
        font-weight: normal;
        line-height: 1.5;
        color: #222;
        margin-top: 0px;
        
        
    }
    .col-left-rent{
    
        border-left: 1px solid black;
        height: 57px;
        padding: 0px 0px 0px 0px;
        
    }
    ion-col.col{
        padding: 0px;
        text-align: center;
    }
       .red{
           background-color: red;
       }
       .green{
           background-color: green;
       }
    }

if you want to use the card code:

 .rent-section{

        text-align: center; 
        font-weight: bold;
        font-size: 20px;
    }
    
    .card-md .rent-text{
        margin: 0 0 2px;
        font-size: 1.4rem;
        font-weight: normal;
        line-height: 1.5;
        color: #222;
        margin-top: 0px;
        float: right;
        text-align: center;
    }
    
    .card-md .utilities-text{
            margin: 0 0 2px;
        font-size: 1.4rem;
        font-weight: normal;
        line-height: 1.5;
        color: #222;
        margin-top: 0px;
        
    }
    .col-left-rent{
    
        border-left: 1px solid black;
        height: 57px;
        padding: 0px 0px 0px 0px;
    text-align: center;
    }
    ion-col.col{
        padding: 0px;
    }
       .red{
           background-color: red;
       }
       .green{
           background-color: green;
       }
       ion-col.col{
           text-align: center;
       }
    }