@props([
    'id' => '',
    'name' => '',
    'label' => '',
    'valign' => false,
])
<div class='my-2'>
    <div class="flex flex-col sm:flex-row sm:gap-2 {{$valign ? 'items-center' : ''}}"}}>
        <label for='{{ $id ?? $name }}' class='sm:w-40 md:w-80 text-left sm:text-right opacity-70 hover:opacity-100 leading-10'>
            {{ $label }}
        </label>
        <div class='flex-grow w-full'>
            {{ $slot }}
            <x-input-error :messages='$errors->get($name)'/>
        </div>
    </div>
</div>