Uitlijnen icons

Zoals je het nu hebt gedaan lijkt me eigenlijk de moeilijkste oplossing. Dit kun je wel fixen, maar wat eenvoudiger is:
- positioneer de input-group-addon absolute tov de input-group (rechts uitgelijnd), of:
- gebruik een ::after (scheelt je weer een div), of:
- geef op basis van de form-group id een background mee die je op no-repeat zet en rechts positioneert.

Met wat zoeken op de interwebs

https://www.google.com/search?q=icon+in+input+field

en gebaseerd op en geleend van hiero (onderaan de pagina) en wat handleidingen:

https://www.elegantthemes.com/preview/TidalForce/2008/06/03/consequat-ut-lacus-tempus-a-ipsum-amet-proin-ligula-pretium-amet-proin-ligula-pretium/

dit van gebakken :

<style>

#inputleft,
#inputright {
    font-size: 13px;
    background: #f8f7f6;
    border: 1px solid #C9D9F0;
    width: 220px;
    background-image: url('data:image/gif;base64,R0lGODlhEAAQAKIAAAAAAP///9bT0+7u7rm5uY2Njf///wAAACH5BAEAAAYALAAAAAAQABAAAANJaLrRsRAGQsmLjIgtyo2T4ATdl03DYHnYFBSpx4Jimr6m4o44aGkc2ce1KRgLm56ByGmWdCvn67mMNqezpZH3yuq6R0+OwYskAAA7');
    background-repeat: no-repeat;
    height: 30px;
    padding: 6px;
    margin-bottom: 3px;
}

#inputleft {
    padding-left : 30px;
    padding-right: 20px;
    background-position: 3% 6px;
	}

#inputright {
    padding-left : 10px;
    padding-right: 30px;
	background-position: 97% 6px;
	}

</style>

<input id="inputleft"  name="name1" type="text" value="" size="30" maxlength="245" required='required' /><br />
<input id="inputright" name="name2" type="text" value="" size="30" maxlength="245" required='required' />

DataUrlMaker hier : http://dataurl.sveinbjorn.org/#dataurlmaker