HTML/CSS Struggling to setup Grid Layout

Let me start by saying that I am by no means experienced, lol. So, my confusion is never-ending.

My main problem is, I'm needing to use a grid layout to style a form. I'm new to grid layout, but I think I'm typing it okay.

All I'm wanting to do is have the labels shifted to the left side of the screen. I also need the buttons, inputs, select, and textarea shifted to the right side of the screen as well as have their width be even all the way across.

Here is my HTML:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>App Academy HTML/CSS Assessment</title>
    <link href="site.css" rel="stylesheet">
  </head>

  <body>
    <div>
      <form action="/pets" method="post">
        <fieldset>
          <div>
            <label for="name">Name</label>
            <input type="text" id="name" name="pet_name">
          </div>

          <div>
            <label for="type">Type</label>
            <select id="type" name="pet_type">
              <option>Cat</option>
              <option>Dog</option>
              <option>Hamster</option>
              <option>Zebra</option>
              <option>Other</option>
            </select>
          </div>

          <div>
            <label for="bio">Biography</label>
            <textarea id="bio" name="pet_bio"></textarea>
          </div>

          <div>
            <label for="owner-email">Owner's Email</label>
            <input type="email" id="owner-email" name="pet_owner_email">
          </div>

          <div>
            <button type="submit" id="new-pet-submit-button">Create new pet</button>
          </div>

          <div>
            <button type="reset">Reset</button>
          </div>
        </fieldset>
      </form>
    </div>

  </body>

</html>

And here's the CSS:

@media screen and (min-width: 600px) {


  fieldset {
    width: 600px;
    box-sizing: border-box;
  }

  form {
    display: grid;
    grid-template-columns: [form-start] 100px [form-middle] 1fr [form-end];
  }

  label {
    padding-right: 2px;
    grid-column: form-start;
  }

  input {
    grid-column: form-middle;
  }

  button {
    grid-column: form-middle;
  }

  input,
  select,
  button {
    width: calc(100% - 110px);
    grid-column: form-middle;
  }

}

@media screen and (max-width: 599px) {
  form {
    width: auto;
  }
}

Solution

    fieldset {
    width: 600px;
    box-sizing: border-box;
  }

fieldset div{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
    align-items: start;
  grid-template-areas:
    "a b b b";
}

  form {
    display: grid;
  }

  label {
    margin-right: 2px;
    grid-area: a;
  }

  input {
    grid-area: b;
  }

  button {
    grid-area: b;
  }

  input,
  select, textarea,
  button {
    width: calc(100% - 110px);
    grid-area: b;
  }

Try this as your css if this is what you want. If not add more details to your question. You can learn more here at mdn