<template lang="html">
  <div style="background-color: white;">
    <flexbox class="inline-wraper-content">
      <flexbox-item :span="8" class="left-wrapper">
        {{leftText}}
        <slot name="left"></slot>
      </flexbox-item>
      <flexbox-item :span="4">
        <slot name="right"></slot>
      </flexbox-item>
    </flexbox>
    <flexbox-item>
      <slot name="bottom"></slot>
    </flexbox-item>
  </div>
</template>

<script>
import { Flexbox, FlexboxItem } from 'vux'
export default {
  props: ['leftText'],
  components: { Flexbox, FlexboxItem }
}
</script>

<style lang="less">
  .inline-wraper-content {
    border-bottom: 1px solid #eee;
    .left-wrapper {
      text-indent: 0.5rem;
      font-size: 0.85rem;
    }
  }
</style>