“Faire une entrée réactive du groupe d'entrée (Rechercher et dérouter avec les boutons)” Réponses codées

Faire une entrée réactive du groupe d'entrée (Rechercher et dérouter avec les boutons)

<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>&nbsp;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>&nbsp; Transfer
						</div>
                </button>
                </div>
		</div>
     </div>
	</div>
</div>