<template>
  <div class="row gx-0" :class="classes">
    <label class="col-sm-2 col-form-label fw-bold text-end px-2" for="name">
      {{ label }}
    </label>
    <div class="col-sm-10 col-form-label value px-2">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    label: String,
    class: String,
  },
  computed: {
    classes() {
      return this.class;
    },
  },
};
</script>

<style scoped>
.value {
  border: solid;
  border-width: 1px;
  border-color: lightgray;
  border-radius: 5px;
  background-color: whitesmoke;
}
</style>