#addRecipe{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 100%; height: 100%; } #newRecipeContent{ display: flex; flex-grow: 10; width: 100%; max-height: 85%; padding: 10px; } #newRecipeLeft{ display: flex; flex-direction: column; align-items: center; width: 40%; height: 100%; border-right: 1px solid rgb(255, 99, 107); padding-right: 10px; } #newRecipeLeft input{ width: 100%; margin-bottom: 15px; box-sizing: border-box; } #recipeChoices{ width: 100%; overflow-y: auto; flex-grow: 2; } #newRecipeData{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 100%; width: 60%; padding: 10px; box-sizing: border-box; } #newRecipeDataInputs{ display: flex; flex-direction: column; align-items: center; } #newRecipeDataInputs > *{ margin: 5px 0; } #newRecipeChosenList{ height: 75%; box-sizing: border-box; overflow-y: auto; } .newRecipeChosenIngredient{ width: 95%; margin: 15px auto; } .newRecipeChosenIngredient div{ display: flex; justify-content: space-between; align-items: center; height: 32px; } .newRecipeChosenIngredient input, .newRecipeChosenIngredient select{ height: 30px; border: none; width: 47%; } .newRecipeChosenIngredient button{ padding: 0; margin: 0 5px; max-height: none; min-width: none; }