I use the flex grid on the responsive application but in the changes of "size", the flex grid is generating margin. Can anyone help me? If I have to change the "size" for p-col-12 p-sm-12 p-md-6 p-lg-3 p-xl-4, the input generates margin.
<div id="form">
<form [formGroup]="subscriptionListForm" (submit)="search()" role="form" name="Form list Contracts"
aria-label="Form Filters list contracts">
<div class="p-grid">
<div class="p-col-12 p-sm-12 p-md-12 p-lg-2 p-xl-2">
<span class="ui-float-label">
<input role="textbox" class="input" id="anyFilter" type="text" pInputText
aria-placeholder="Name's, NIF's, Email's OR Phone's User Filter"
aria-labelledby="filterLabel" formControlName="anyFilter" autocomplete="off">
<label for="anyFilter" id="filterLabel">Any Filter</label>
</span>
</div>
<div class="p-col-12 p-sm-12 p-md-12 p-lg-2 p-xl-2">
<span class="ui-float-label">
<p-calendar formControlName="inputCreationDate" id="inputCreation"
dateFormat="dd/mm/yy"></p-calendar>
<label for="inputCreation">Date Creation</label>
</span>
</div>
<div class="p-col-12 p-sm-12 p-md-12 p-lg-2 p-xl-2">
<span class="ui-float-label">
<p-calendar formControlName="inputExpirationDate" id="inputExpiration"
dateFormat="dd/mm/yy"></p-calendar>
<label for="inputExpiration">Date Creation</label>
</span>
</div>
<div class="p-col-12 p-sm-12 p-md-12 p-lg-2 p-xl-2">
<button pButton label="Apply filter" role="button" type="button submit"
aria-label="Button to search" pTooltip="Apply filter" class="shadow"
tooltipPosition="top"></button>
</div>
</div>
</form>
</div>
if p-col-12 p-sm-12 p-md-12 p-lg-2 p-xl-2 image-1
if p-col-12 p-sm-12 p-md-6 p-lg-3 p-xl-4 image-2
Why? I don't know to make it.