Necesito que el siguiente contenido se pueda acomodar en dos columnas dentro del componente "form"; <div className="p-d-flex"> <div className="card"> <form id="recinto-form" className="p-fluid p-formgrid p-grid"> <div className="p-field col-12 md:col-6"><span className="p-float-label"> <Controller name="idRecinto" control={control} rules={{required:t('recinto:required.idRecinto')}} render={({ field , fieldState }) => ( <InputText id={field.name} ref={field.ref} {...field} className={classNames({ 'p-invalid': fieldState.invalid })} />)}></Controller><label htmlFor="idRecinto" className={classNames({ 'p-error': errors.idRecinto })}> {t('recinto:label.idRecinto')} </label></span> {getFormErrorMessage('idRecinto')} </div> <div className="p-field col-12 md:col-6"><span className="p-float-label"> <Controller name="nombre" control={control} rules={{required:t('recinto:required.nombre')}} render={({ field , fieldState }) => ( <InputText id={field.name} ref={field.ref} {...field} className={classNames({ 'p-invalid': fieldState.invalid })} />)}></Controller><label htmlFor="nombre" className={classNames({ 'p-error': errors.nombre })}> {t('recinto:label.nombre')} </label></span> {getFormErrorMessage('nombre')} </div> <div className="p-field col-12 md:col-6"><span className="p-float-label"> <Controller name="idMap" control={control} rules={{required:t('recinto:required.idMap')}} render={({ field , fieldState }) => ( <InputText id={field.name} ref={field.ref} {...field} onChange={(e) => field.onChange(e.target.value)} className={classNames({ 'p-invalid': fieldState.invalid })} keyfilter="int" maxLength={5} /> )}></Controller><label htmlFor="idMap" className={classNames({ 'p-error': errors.idMap })}> {t('recinto:label.idMap')} </label></span> {getFormErrorMessage('idMap')} </div> <div className="p-field col-12 md:col-6"><span className="p-float-label"> <Controller name="imagen" control={control} rules={{required:t('recinto:required.imagen')}} render={({ field , fieldState }) => ( <InputText id={field.name} ref={field.ref} {...field} className={classNames({ 'p-invalid': fieldState.invalid })} />)}></Controller><label htmlFor="imagen" className={classNames({ 'p-error': errors.imagen })}> {t('recinto:label.imagen')} </label></span> {getFormErrorMessage('imagen')} </div> <div className="p-field col-12 md:col-6"><span className="p-float-label"> <Controller name="generales" control={control} render={({ field }) => ( <InputText id={field.name} ref={field.ref} {...field} onChange={(e) => field.onChange(e.target.value)} />)}></Controller><label htmlFor="generales" className={classNames({ 'p-error': errors.generales })}> {t('recinto:label.generales')} </label></span> {getFormErrorMessage('generales')} </div> <div className="p-field p-col-12 p-md-12"> {dlgFooter} </div> </form> </div> </div>

const code = `
function add(a, b) {
  return a + b
}

add(1, 2)
`