<section id='create-recipe'>
  <form id='add-ingredients'>
    <h1>Create Recipe</h1>
    <label for='recipe-name'>Recipe Name</label>
    <input type='text' name='recipe-name' id='recipe-name'>
    <h2>Add Ingredients</h2>
    <ul class='added-ingredients'>
      <li class='ingredient'>
        <fieldset>
          <div class='selection'>
            <label for='ingredient-01' class='sr-only'>First Ingredient</label>
            <select name='ingredient-01' id='ingredient-01'>
              <option value='paella-rice'>Paella Rice</option>
              <option value='tomatoes'>Tomatoes</option>
              <option value='onion'>Onion</option>
              <option value='chicken-stock'>Chicken Stock</option>
            </select>
          </div>
          <label for='quantity-01' class='sr-only'>Amount</label>
          <input type='text' class='quantity' name='quantity-01' id='quantity-01' placeholder='amount'>
        </fieldset>
      </li>
      <li class='ingredient'>
        <fieldset>
          <div class='selection'>
            <label for='ingredient-02' class='sr-only'>Second Ingredient</label>
            <select name='ingredient-02' id='ingredient-02'>
              <option value='paella-rice'>Paella Rice</option>
              <option value='tomatoes'>Tomatoes</option>
              <option value='onion'>Onion</option>
              <option value='chicken-stock'>Chicken Stock</option>
            </select>
          </div>
          <label for='quantity-02' class='sr-only'>Amount</label>
          <input type='text' class='quantity' name='quantity-02' id='quantity-02' placeholder='amount'>
        </fieldset>
      </li>
    </ul>
    <fieldset class='btn-group'>
      <button id='add-ingredient'>Add Ingredient</button>
      <button id='send-ingredients' type="submit">Send</button>
    </fieldset>
  </form>
</section>
@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected];400&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

#add-ingredients {
  max-width: 600px;
  padding: 0 1rem;
}

ul {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0 0 1rem;
}

label {
  margin-right: .75rem;
}

select, input, button {
  font-family: 'Roboto', sans-serif;
  padding: .35rem;
}

button {
  padding: .35rem 1rem;
  cursor: pointer;
}

fieldset {
  display: flex;
  align-items: center;
  padding: 0;
  border: none;
  column-gap: 1rem;
}

.sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.