<template>
    <div class="label" :style="style">
        <label>{{ name }}</label>
        <div class="element" :style="style">
            <slot></slot>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'label',
        props: {
            name: {type: String, required: true},
            style: {type: String},
        }
    }
</script>

<style scoped>

    .label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .label label {
        font-weight: bold;
    }

    .element {
        display: flex;
        margin-bottom: 0;
    }
</style>
