I want to make a 2-column responsive system. I want the badge (2) to have a column of the exact size of the content of it and the column (1) has the space it deserves. how can I do it? This is my code:
<ion-grid no-padding>
<ion-row>
<ion-col col-10>
<h4 >
<strong>{{ antecedentAlert.antPac.get_tipo_antecedente.nombre }}</strong>
<span *ngIf="antecedentAlert.antPac.get_subtipo_antecedente != null">
: {{ antecedentAlert.antPac.get_subtipo_antecedente.nombre }}
</span>
.
.
.
</ion-col>
<ion-col col-auto>
<span class="contenedor-badge-icon">
<ion-badge class="badge-estado-ant" color="azul-2" *ngIf="antecedentAlert.antPac.validado == 'validado' ">Validado</ion-badge>
<ion-badge class="badge-estado-ant" color="danger" *ngIf="antecedentAlert.antPac.validado == 'no validado' ">No validado</ion-badge>
<ion-badge class="badge-estado-ant" color="naranja-2" *ngIf="antecedentAlert.antPac.validado == 'pendiente' "><ion-icon class="candado-antecedentes" [name]="antecedentAlert.antPac.privado=='1'?'lock':''" [color]="white"></ion-icon> Por validar</ion-badge>
</span>
</ion-col>
</ion-row>
</ion-grid>
Actual result: