<div class="container">
  <div class="row">
    <div class="input-container-1">
      <i class="fas fa-user icon-1"></i>
      <input type="text" class="input-1" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
    </div>
  </div>
</div>
/* icon va input uchun umumiy konteyner */
.input-container-1 {
	display: flex; /* icon va inputni bitta qatorda chiqarish uchun */
	align-items: center;
	justify-content: center;
  width: 250px;
	margin: 100px auto;
}
.icon-1 {
	padding: 16px;
	color: white;
	background-color: dodgerblue;
	font-size: 20px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.input-1 {
	padding: 10.5px; /* icon bilan balandligi teng bo'lishi uchun */
  width: 100%; 
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
	border-style: solid;
	border-color: dodgerblue;
	outline: none;
  color: #818181;
  font-size: 18px;
  letter-spacing: 1.5px;
}
.input-1::placeholder {
  color: dodgerblue;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.