title: Problem with large size of v-checkbox element in Vuetify
body: <p>I am using Vuetify in a Vue app, and I am attempting to create a checkbox/textfield combo (as shown <a href="https://vuetifyjs.com/en/components/selection-controls#checkboxes-inline-with-a-textfield" rel="noreferrer">here in the Vuetify docs</a>). However, when I attempt to implement it in my app, the size of the checkbox element is large, and so it creates a large space between the checkbox and the textfield:</p>
  
  <p><a href="https://i.stack.imgur.com/3Gu9c.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3Gu9c.png" alt="large space after checkbox"></a></p>
  
  <p>And this is the markup that I am using::</p>
  
  <pre><code>&lt;v-container grid-list-lg&gt;
    &lt;v-layout row&gt;
      &lt;v-flex xs1&gt;
        &lt;v-checkbox @change="disableText($event, 'alertBackgroundColor')"&gt;&lt;/v-checkbox&gt;
      &lt;/v-flex&gt;
      &lt;v-flex xs4&gt;
        &lt;v-text-field
          v-bind="fields.alertBackgroundColor"
          v-model="templateModel.alertBackgroundColor"
          placeholder="#4A4A4A"
          :disabled="true"
        /&gt;
        &lt;/v-flex&gt;
        &lt;v-flex xs1&gt;
          &lt;ColorPickerButton
            v-bind:field-name="'alertBackgroundColor'"
            v-bind:init-color="templateModel.alertBackgroundColor"
            v-on:update-color="getUpdatedColor"&gt;
          &lt;/ColorPickerButton&gt;
        &lt;/v-flex&gt;
        &lt;!-- Alert Text Color --&gt;
        &lt;v-flex xs1&gt;
          &lt;v-checkbox @change="disableText($event, 'alertBackgroundColor')"&gt;&lt;/v-checkbox&gt;
        &lt;/v-flex&gt;
        &lt;v-flex xs4&gt;
          &lt;v-text-field
            v-bind="fields.alertTextColor"
            v-model="templateModel.alertTextColor"
            placeholder="#4A4A4A"
            :disabled="true"
          /&gt;
        &lt;/v-flex&gt;
        &lt;v-flex xs1&gt;
          &lt;ColorPickerButton
            v-bind:field-name="'alertTextColor'"
            v-bind:init-color="templateModel.alertTextColor"
            v-on:update-color="getUpdatedColor"
          &gt;&lt;/ColorPickerButton&gt;
        &lt;/v-flex&gt;
      &lt;/v-layout&gt;
    &lt;/v-container&gt;
  </code></pre>
  
  <p>If I modify my markup to mimic the docs example, like so:</p>
  
  <pre><code>&lt;v-container grid-list-lg&gt;
    &lt;v-layout row&gt;
      &lt;v-flex xs5&gt;
        &lt;v-checkbox @change="disableText($event, 'alertBackgroundColor')""&gt;&lt;/v-checkbox&gt;
        &lt;v-text-field
          v-bind="fields.alertBackgroundColor"
          v-model="templateModel.alertBackgroundColor"
          placeholder="#4A4A4A"
          :disabled="true"
        /&gt;
      &lt;/v-flex&gt;
      &lt;v-flex xs1&gt;
        &lt;ColorPickerButton
          v-bind:field-name="'alertBackgroundColor'"
          v-bind:init-color="templateModel.alertBackgroundColor"
          v-on:update-color="getUpdatedColor"&gt;
        &lt;/ColorPickerButton&gt;
      &lt;/v-flex&gt;
    &lt;/v-layout&gt;
  &lt;/v-container&gt;
  
  </code></pre>
  
  <p>They don't even fit on one line:</p>
  
  <p><a href="https://i.stack.imgur.com/U8NUo.png" rel="noreferrer"><img src="https://i.stack.imgur.com/U8NUo.png" alt="enter image description here"></a></p>
  
  <p>How do I get these two elements to fit together side-by-side as they do in the docs example? The issue is the calculated size of the element itself, not the padding or margin, so playing with the <a href="https://vuetifyjs.com/en/framework/spacing" rel="noreferrer">spacing helpers</a> doesn't make a difference.</p>