无法使文本框和按钮排成一行

Question

我试图将按钮放在剃须刀形式的文本框旁，但无法使其正确对齐。

这是我的代码：

<div class="row form-inline">
                <div class="form-group">
                    @Html.LabelFor(m => m.Product.description, "Product")
                    <span class="tt-container input-group">
                        <span class="input-group-addon"><i class="fa fa-barcode" aria-hidden="true"></i></span>
                        @Html.TextBoxFor(m => m.Product.description, new { @class = "form-control", data_rule_validProduct = "true", @id = "product" })
                        <span><button type="button" id="addRow" class="btn btn-primary">ADD</button></span>
                    </span>

                    @Html.ValidationMessageFor(m => m.Product.description)
                </div>
            </div>

我最终得到这样的东西：