对齐使用CSS水平选择div中的组件

Question

我需要一点帮助css，我不是专家css， 我使用vue.js web app 我正在使用vue-multiselect组件。之前我使用的是简单的选择组件，我能够将标签和2个选择组件水平对齐，现在我已经切换到vue-multiselect，我无法弄清楚我应该如何水平对齐它们。

根据回答更新

  <template>
    <div id="select">
    <my-row>
        <my-col>
    <label> Source </label>
    </my-col>
    <my-col>
    <label>Project</label>
    </my-col>
    <my-col>
     <multiselect  
     placeholder="Select a Project" 
     v-model="selected" 
     :options="projects" 
     :searchable="true" 
     :custom-label="customLabel" 
     track-by="name" 
     @input="executeLoader"
     >
         <template slot="singleLabel" slot-scope="{ option }"><strong>{{ option.name }}</strong></template>

    </multiselect>
    </my-col>
    <my-col>
    <div class="round-button">
        <div class="round-button-circle">
            <a href="#">
                <img src="images/leftarrow.png"  alt="Reload" title="Sync with Github" />
            </a>
        </div>
    </div> </my-col>
    <my-col>
    <label>Branch:</label>
    </my-col>
    <my-col>
    <multiselect 
    v-model="selectedBranch" 
    :options="branches"
    :max="3"
    :max-height="120"
    :customLabel="customLabel"
    track-by="name"
    @input="branchSelecter">
        <option disabled selected>Select a branch</option>
        <template slot="singleLabel" slot-scope="{ option }">{{ option.name }}</template>

    </multiselect>
    </my-col>
    </my-row>
    <br>
    <small>{{ message }}</small>
</div>

</template>

https://codesandbox.io/s/github/sanfx/publish