Q:

How do I make my form items responsive & fall into line when page is resized?

so I have a form and I'm happy with it for the most-part but when the page is resized, the appearance/functionality goes out the window... How do I make it so the form items line up 1 by 1 underneath each other whilst still holding the same (or similar) appearance at 100%?
Also, if you notice, the genre dropdown menu is slightly shorter than the others... any way to fix this?
HTML: 

@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0;
  font-family: 'Raleway', georgia, arial;
  background-color: #e0e0e0;
  text-align: center;
}

.newFilm {
  text-align: left;
  display: inline-block;
  background-color: #ff6699;
  width: 80%;
  padding: 20px;
}

label {
  font-size: 1em;
  padding: 6px;
  color: #fff;
  font-weight: 700;
  display: block;
  text-align: left;
}

.form {
  margin: auto;
  display: flex;
  text-align: center;
  flex-direction: column;
}

h2 {
  font-weight: 700;
  font-size: 2em;
  padding: 10px;
  border-radius: 20px;
  text-align: center;
  width: 25%;
  background-color: #e0e0e0;
}

#formTitle {
  margin-top: 0;
  margin-bottom: 0;
}

.row {
  margin-left: -20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.col {
  padding: 20px;
}

input,
textarea,
select {
  width: 100%;
  display: block;
  border-radius: 25px;
  background-color: #e0e0e0;
  padding: 10px;
  border: none;
}

input::placeholder {
  color: #000;
}

textarea::placeholder {
  color: #000;
}

#modifyFilmButton {
  float: right;
}
<div class="newFilm">
  <h2 id='formTitle'>Create new review</h2>
  <div class="form">
    <form>
      <div class="row">
        <div class="col">
          <label for="title">Title:</label><input type="text" id="title" placeholder="Title of the film (and year)">
          <label for="image">Image:</label><input type="text" id="image" placeholder="URL to artwork for the film">
          <label for="trailer">Trailer:</label><input type="text" id="trailer" placeholder="URL to trailer for the film">
          <label for="rating">Rating:</label><input type="number" id="rating" min="1" max="10" placeholder="How do you rate this film out of 10?">
        </div>
        <div class="col">
          <label for="genre">Genre:</label>
          <select id="genre">
            <option value="" disabled selected>What genre does the film fit into?</option>
            <option value="action">Action</option>
            <option value="comedy">Comedy</option>
            <option value="horror">Horror</option>
            <option value="other">Other</option>
          </select>
          <label for="synopsis">Synopsis:</label>
          <textarea rows="9" id="synopsis" placeholder="What is the story behind the film? (Spoiler alert!)"></textarea>
        </div>
      </div>
      <input type="hidden" id="id">
      <button id="modifyFilmButton">Post review!</button>
    </form>
  </div>
</div>

A:

You can use Media Queries for your issue.
Just add this to your CSS:
@media only screen and (max-width: 700px) {
  .row{
    grid-template-columns:1fr;
  }
}

like this

