Practical condition

<div class="p-5 py-7.5 bg-white rounded-button flex flex-col gap-5">

    <span class="text-xl font-semibold">Conditions pratiques</span>

    <div class="flex md:flex-row flex-col md:gap-20 gap-2">

        <div class="flex flex-col gap-5">

            <div class="flex flex-col gap-2">

                <div class="flex gap-4 text-smaller font-semibold">

                    <div class="shrink-0">

                        <?= icon('experience', 'w-5.5 text-primary-accent'); ?>

                    </div>

                    <div>Niveau d'expérience requis : <span class="font-normal">expérience exigée</span></div>

                </div>

                <div class="flex gap-4 text-smaller font-semibold">

                    <div class="shrink-0">

                        <?= icon('study', 'w-5.5 text-primary-accent'); ?>

                    </div>

                    <div>Niveau d'étude requis : <span class="font-normal">Bac</span></div>

                </div>

                <div class="flex gap-4 text-smaller font-semibold">

                    <div class="shrink-0">

                        <?= icon('driving-licence', 'w-5.5 text-primary-accent'); ?>

                    </div>

                    <div>Permis requis : <span class="font-normal">Permis B</span></div>

                </div>

                <div class="flex gap-4 text-smaller font-semibold">

                    <div class="shrink-0">

                        <?= icon('hour', 'w-5.5 text-primary-accent'); ?>

                    </div>

                    <div>Prise de poste : <span class="font-normal">Immédiat</span></div>

                </div>

            </div>

        </div>

        <div class="flex flex-col gap-5">

            <div class="flex flex-col gap-2">

                <div class="flex gap-4 text-smaller font-semibold">

                    <div class="shrink-0">

                        <?= icon('wallet', 'w-5.5 text-primary-accent'); ?>

                    </div>

                    <div>Type de salaire : <span class="font-normal">Tranche</span></div>

                </div>

                <div class="flex gap-4 text-smaller font-semibold">

                    <div class="shrink-0">

                        <?= icon('wallet', 'w-5.5 text-primary-accent'); ?>

                    </div>

                    <div>Montant : <span class="font-normal">1500 - 5000€ brut / mensuel</span></div>

                </div>

                <div class="flex gap-4 text-smaller font-semibold">

                    <div class="shrink-0">

                        <?= icon('health', 'w-5.5 text-primary-accent'); ?>

                    </div>

                    <div>Avantages salariaux : <span class="font-normal">Mutuelle, actionnariat salarié</span></div>

                </div>

                <div class="flex gap-4 text-smaller font-semibold">

                    <div class="shrink-0">

                        <?= icon('work-location', 'w-5.5 text-primary-accent'); ?>

                    </div>

                    <div>Lieu de travail : <span class="font-normal">11000 Carcassonne, Occitanie</span></div>

                </div>

            </div>

        </div>

    </div>

    <div class="flex flex-row gap-3">

        <button class="btn text-white text-xxs bg-icon btn-pill min-h-[35px] w-fit"><?= icon('bag', 'w-4 shrink-0 text-white'); ?>

            CDI

        </button>

        <button class="btn text-white text-xxs bg-icon btn-pill min-h-[35px] w-fit"><?= icon('hour', 'w-4 shrink-0 text-white'); ?>

            Temps plein

        </button>

    </div>

</div>