前端页面：单选或者复选框“其他”选项后面跟一个文本框

问题
前端页面：单选或者复选框“其他”选项后面跟一个文本输入框
1.两个组件间距无法控制
2.其他选项和具体描述输入框如何将两者的关联起来

代码：

<el-row :gutter="20">
                    <el-col :span="4">
                        <div></div>
                        <el-checkbox-group v-model="form.species">
                            <el-checkbox label="电焊" name="species"></el-checkbox>
                            <el-checkbox label="电割" name="species"></el-checkbox>
                            <el-checkbox label="其他" name="species"></el-checkbox>                                                 
                        </el-checkbox-group> 
                    </el-col>
                    <el-col :span="6">
                        <div></div>
                        <el-input v-model="form.describe2" placeholder="其他-具体描述" ></el-input>
                    </el-col>
                </el-row>

你写在复选框后面就可以了

间距是el-col这个引起的，关联的话你是要怎么关联，是选择其他还出现输入框？

   <el-checkbox-group v-model="checkedCities">
      <el-checkbox label="电焊" name="species"></el-checkbox>
      <el-checkbox label="电割" name="species"></el-checkbox>
      <el-checkbox label="其他" name="species"></el-checkbox>     
   </el-checkbox-group>                  
    <el-input  placeholder="其他-具体描述" v-if="checkedCities.indexOf('其他') >= 0" style="display:inline"></el-input>

然后给input输入框一个固定宽度就可以了

<el-col v-if="form.species.includes('其他')" :span="6">
  <div></div>
  <el-input v-model="form.describe2" placeholder="其他-具体描述" ></el-input>
</el-col>