<template>
    <div class="tw-flex tw-items-center tw-flex-1 tw-pr-3" :class="$style.container">
        <label :class="$style.label">{{ label }}</label>
        <slot />
    </div>
</template>

<script>
export default {
    props: {
        label: String,
    },
};
</script>

<style module lang="less">
.container {
    max-width: 400px;
}

.label {
    color: rgba(0, 0, 0, 0.85);
    width: 6em;
    text-align: right;
    margin-right: 1em;

    &::after {
        content: ':';
    }
}
</style>
