vue.js コンポーネントでデザインが崩れるてしまう

Question

以下のように、
Laravel5.7 + vue.js コンポーネントと、Bootstrap4 を使用して
コンポーネントを作成しました。

<template>

    <div id="generalmodal">

        <div class="form-group row">
            <div class="col-md-1">
                <label for="cd" class="col-form-label">
                    <slot name="title"></slot>
                </label>
            </div>

            <div class="col-md-1">
                <input type="text" name="cd" v-model="cd" class="form-control code_ref" oncontextmenu="return false;" @mouseup.right="eventMouseRightClick()" @keyup.f4="eventMouseRightClick()" v-bind:maxlength="maxlength">
            </div>

            <div class="col-md-2">
                <label for="name" class="col-form-label">{{ name }}</label>
            </div>

            <div class="col-md-auto">
            </div>
        </div>



    </div>

</template>

本コンポーネント配置後に、右側にラベルと、テキストボックス
をインラインで配置したいのですが、位置がずれてしまいます。

<div class="form-group row"> を排除見ましたが、うまくいきませんでした。

イメージは、
ラベルCD　テキストcd ラベルNAME ラベルB　テキストB

こうで、

ラベルCD　テキストcd ラベルNAMEが上記のコンポーネントで
ラベルB　テキストB
をインラインで配置したく思います。

どうかよろしくお願い致します。