#newRecipeForm { display: flex; flex-direction: column; } #safeRecipe { float: right; } #newRecipeForm div font { font-weight: 800; padding-right: 1em; } #RecipeFormName { font-size: 16px; padding: .2em; border: 1px solid #ddd; } #recipeDurationInput { width: 3em; font-size: 16px; padding: .2em; border: 1px solid #ddd; margin-right: .5em; } #recipeDescription { font-family: 'Open Sans', sans-serif; font-size: 16px; padding: .2em; border: 1px solid #ddd; width: 100%; box-sizing: border-box; } .ingredientLine { display: flex; margin-bottom: .1em; } .ingredientAmount { width: 3em; font-size: 16px; padding: .2em; border: 1px solid #ddd; } .ingredientUnit { -webkit-appearance: none; width: 3em; margin-left: .5em; font-size: 16px; padding: .2em; border: none; color: white; font-weight: 800; background-color: #5f5f5f; } .ingredientName { font-size: 16px; padding: .2em; border: 1px solid #ddd; } .ingredientAutocomplete { position: relative; margin-left: .5em; display: flex; flex-direction: column-reverse; } .ingredientAutocomplete-items { position: absolute; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; width: 100%; z-index: 99; transform: translateY(-2em); } .ingredientAutocomplete-items div { padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; } .ingredientAutocomplete-items div:hover { background-color: #e9e9e9; } .ingredientAutocomplete-active { background-color: DodgerBlue !important; color: #ffffff; } .removeIngredient { display: inline-block; text-align: center; padding: .1em .2em .3em .2em; margin-left: .5em; height: 1em; width: 1em; height: 20px; width: 20px; border-radius: 100%; background-color: black; color: white; cursor: pointer; user-select: none; } .addIngredient { display: inline-block; text-align: center; padding: .1em .2em .3em .2em; margin-left: .5em; height: 1em; width: 1em; height: 20px; width: 20px; border-radius: 100%; background-color: #5f5f5f; color: white; cursor: pointer; user-select: none; }