Input addon

<!-- Add-on prepended -->
<div class="container">
<!-- Add-on -->
<div class="container__addon">
...
</div>
<!-- Input -->
<input type="text" class="container__input" />
</div>
<!-- Add-on appended -->
<div class="container">
<!-- Input -->
<input type="text" class="container__input" />
<!-- Add-on -->
<div class="container__addon">
...
</div>
</div>
<!-- Appended and prepended add-ons -->
<div class="container">
<!-- Add-on -->
<div class="container__addon">
...
</div>
<!-- Input -->
<input type="text" class="container__input" />
<!-- Add-on -->
<div class="container__addon">
...
</div>
</div>
.container {
display: flex;
/* Take full size */
width: 100%;
}
.container__input {
/* Take the remaining width */
flex: 1;
}
.container__addon {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}