Input Group Issue

Hallo,

i have some issue about input group,
In the picture the fields don’t seem to be different, but pay attention to the left field, between the badge and the field they are not grouped perfectly, in contrast to the field on the right with the 2 badges grouped perfectly, the right field is the date picker field from kartik

image

here is snippet my of code

<?php $form = ActiveForm::begin([
    'options' => ['class' => 'form-horizontal bootstrap5'], // Atur kelas CSS untuk form
    'fieldConfig' => [
        'options' => ['class' => 'form-group'], 
        'errorOptions' => ['class' => 'help-block'], 
    ],
]) ; ?>
<div class="row">
	<div class="col-auto">
		<div class="input-group input-group-sm mb-3">
		  <span class="input-group-text" ><i class="fas fa-industry fa-xs"></i>&nbsp Unit</span>
			<?= $form->field($model, 'program_unit')->dropdownList( \yii\helpers\ArrayHelper::map($items, 'unit_id','unit_name'), ['prompt' => 'Pilih', 'class' => 'form-select form-select-sm', 'placeholder'=>'Unit', 'id'=>'unit',])->label(false) ?>
			
			
		</div>
	</div>
	<div class="col-auto">
		<?= //$form->field($model, 'program_date')->textInput(['class' => 'form-control form-control-sm']) 
				$form->field($model, 'program_date')->widget(DatePicker::classname(), [
				//'options' => ['placeholder' => 'Enter birth date ...'],
				'bsVersion' => '5.x',
				'type' => DatePicker::TYPE_COMPONENT_PREPEND,
				'size' => 'sm',
				//'pickerIcon' => '<i class="fas fa-calendar-alt text-primary"></i>',
				//'removeIcon' => '<i class="fas fa-trash text-danger"></i>',
				'pluginOptions' => [
					'autoclose' => true,
				],
			])->label(false)	
		?>
	</div>
</div>

then when i try for blank, is there different appearance like this
2

thanks for the help

Try using Template option

I have tried change activeform format to html format, is working for style, buat not working for field validation

share html version of field and code you tried with active field using template.