.input-group {
display: table; .form-control { position: relative; width: 100%; &:focus { z-index: 2; } + .btn { margin-left: 0; } } // For when you want the input group to behave like inline-block. &.inline { display: inline-table; }
}
.input-group .form-control, .input-group-button {
display: table-cell;
}
.input-group-button {
width: 1%; vertical-align: middle; // Match the inputs
}
.input-group .form-control:first-child, .input-group-button:first-child .btn {
border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.input-group-button:first-child .btn {
// stylelint-disable-next-line primer/spacing margin-right: -1px;
}
.input-group .form-control:last-child, .input-group-button:last-child .btn {
border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.input-group-button:last-child .btn {
// stylelint-disable-next-line primer/spacing margin-left: -1px;
}