<div class="inline-flex-box">
  <div class="form-group inline-item">
    <label for="cpuLimit" class="clr-col-md-4">{{'SHARED.COMPONENT.RESOURCE_LIMIT.CPU_LIMIT' | translate}}</label>
    <input type="text" id="cpuLimit" name="cpuLimit" type="number" [(ngModel)]="resources.cpuLimit" style="width: 110px;">
    <span class="unit">{{'SHARED.COMPONENT.RESOURCE_LIMIT.CPU_LIMIT_UNIT' | translate}}</span>
  </div>
  <div class="form-group inline-item">
    <label for="cpuRequestLimitPercent" class="clr-col-md-4">{{'SHARED.COMPONENT.RESOURCE_LIMIT.CPU_LIMIT_PERCENT' | translate}}</label>
    <input type="text" id="cpuRequestLimitPercent" name="cpuRequestLimitPercent" type="number" [(ngModel)]="resources.cpuRequestLimitPercent" style="width: 110px;">
    <span class="unit">%</span>
  </div>
  <div class="form-group inline-item">
    <label for="memoryLimit" class="clr-col-md-4">{{'SHARED.COMPONENT.RESOURCE_LIMIT.MEMORY_LIMIT' | translate}}</label>
    <input type="text" id="memoryLimit" type="number" name="memoryLimit"  [(ngModel)]="resources.memoryLimit" style="width: 110px;">
    <span class="unit">G</span>
  </div>
  <div class="form-group inline-item">
    <label for="memoryRequestLimitPercent" class="clr-col-md-4">{{'SHARED.COMPONENT.RESOURCE_LIMIT.MEMORY_LIMIT_PERCENT' | translate}}</label>
    <input type="text" id="memoryRequestLimitPercent" type="number" name="memoryRequestLimitPercent"  [(ngModel)]="resources.memoryRequestLimitPercent" style="width: 110px;">
    <span class="unit">%</span>
  </div>
  <div class="form-group inline-item">
    <label for="replicaLimit" class="clr-col-md-4">{{'SHARED.COMPONENT.RESOURCE_LIMIT.REPLICA_LIMIT' | translate}}</label>
    <input type="text" id="replicaLimit" type="number" name="replicaLimit"  [(ngModel)]="resources.replicaLimit" style="width: 110px;">
    <span class="unit">{{'SHARED.COMPONENT.RESOURCE_LIMIT.REPLICA_LIMIT_UNIT' | translate}}</span>
  </div>
</div>