Misalignment using input-group

[tr32]

With the following code snippet using input-group on Blk Design System v1.0.0, I get a misalignment of input field and button:

<div class="row">    
    <div class="col-sm-5">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search...">
            <div class="input-group-append">
                <button type="button" class="btn btn-secondary">
                    <i class="fa fa-search"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="col-sm-7">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Type something...">
            <div class="input-group-append">
                <button type="submit" class="btn btn-primary">Submit</button>
                <button type="reset" class="btn btn-danger">Reset</button>
            </div>
        </div>
    </div>
</div>

How can I fix this?

[rarestoma]

Hi @tr32,

Thank you for working with our products.

Please add the following lines in your css files:

.input-group .input-group-append .btn { padding: 10px 40px; margin-top: 0; }

Please let me know if it works.

All the best, Rares

[tr32]

Thank you! It worked.