<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
@media (max-width: 534px) {
input#domain {
width: 100%;
}
.input-group .input-group-append {
width: 100%;
margin: 0 auto;
}
.input-group .input-group-append .btn {
width: 50%;
margin-top: 5px;
border-radius: 3px !important;
}
.input-group-append button:last-child {
margin-left: 0.5rem !important;
}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="container">
<div class="row">
<div class="col-12">
<div class="input-group">
<input type="text" name="domain" id="domain" class="form-control rounded-left" placeholder="Search ...">
<div class="input-group-append">
<button class="btn search-btn btn-success btn-hover d-flex align-items-center" type="submit">
<div class="m-auto ml-1">
<i class="fa fa-search"></i> Search
</div>
</button>
<button class="btn search-btn btn-warning btn-hover d-flex align-items-center rounded-right" type="submit">
<div class="m-auto">
<i class="fa fa-exchange"></i> Transfer
</div>
</button>
</div>
</div>
</div>
</div>
</div>