.cc-input-group {
    display: flex;
    flex-wrap: wrap;
}

.cc-input-group__input {
    border-right: none!important;
    border-bottom-right-radius: 0px!important;
    border-top-right-radius: 0px!important;
    order: 1;
    flex-grow: 1; /* fills width */
    flex-basis: 20%; /* min-width 20% */
}

.cc-input-group__append {
    display: flex;
    height: auto;
    background-color: #f6f6f6;
    padding: 0 15px;
    border: 1px solid #bbb;
    font-weight: 600;
    border-radius: 0 3px 3px 0;
    order: 2;
}

.cc-input-group__text {
    display: flex;
    align-items: center;
}

.cc-input-group label.error {
    order: 3;
    flex: 100%;
}

.cc-input-group__append--cold {
    background-color: #aadcfe;
}

.cc-input-group__append--warm {
    background-color: #ffa4a4;
}

.cc-input-group sup {
    position: relative;
    top: -0.1em;
}