 .conteneur {  
                list-style-type: none;  
                padding: 0;  
                border: 1px solid #aaa;  
                border-radius: 5px;  
                background-color: #eee;  
                font-family: helvetica;  
                font-size: 1em;  
			

            }  
 
 p.champs {  
                display: flex;  
                justify-content: flex-end;  
                padding: 10px; 
            }  
p.champs > label {  
				text-align:right;
				
                flex: 1 1 100px;  
				/* les labels peuvent  agrandir ou diminuer et leur taille initiale souhaitée est de 100 pixels */

            }  
 p.champs > input {  
 
                flex: 2 1 100px;  
				/* Les champs peuvent s’agrandir d’un facteur 2 pour occuper l’espace disponible dans le conteneur parent 
				>> Avec ces deux règles, la largeur des champs de saisie sera toujours deux fois plus large que celle des étiquettes. La largeur du conteneur parent est divisée en 3 parts : 1 pour les étiquettes et 2 pour les champs.				
				*/
            }  
 p.champs > * {  
                padding: 5px;  
            }  
 #envoyer, #annuler {  
                flex: 0 0 100px;  
			/* 	permet d’indiquer que les boutons ne peuvent pas agrandir ni diminuer et que leur taille initiale souhaitée est de 100 pixels */
                background-color: #777;  
                color: #fff;  
                border: none;  
                border-radius: 3px;  
                margin-left: 10px;  
            }  