How do I achieve this layout with CSS? – Photoshop

First, you should convert most, of not all your IDs to CLASS tags. You don’t need to make them all ID and then it limits you from having multiple movie cards on one page.

Where’s a JSfiddle I created for you, updating the html a little and mostly the CSS.

HTML:

<header>
      <img src="img/rv-logo.png">
      <p class="tagline">Want to know whether or not it's worth paying to watch a certain film or not? See what we think first!</p>
    </header>


  <div class="sortFilms">
<div id="filmContainer">
  <div class="poster">
    <img id='filmImage'src="https://images-na.ssl-images-amazon.com/images/I/51Gh9OaWVcL.jpg">
  </div>
  <div class="info">
  <p id='filmTitle'>Deadpool</p>
    <label>Year:</label><p id='filmYear'>2016</p>
    <label>Genre:</label><p id='filmGenre'>Comedy</p>
    <label>Rating:</label><p id='filmRating'>9</p>
    <label>Synopsis:</label><p id='filmSynopsis'>Just Ryan Reynolds, doing Ryan Reynolds things in a tight suit.</p>
    <a href='viewFilms.html'>Back to list</a>
  </div>
</div>
</div>

CSS (All of your original CSS is in there too, which could be cleaned up):

@import url(https://fonts.googleapis.com/css?family=Raleway);

body {
  margin: 0;
  font-family: 'Raleway', georgia, arial;
  background-color: #e0e0e0;
  text-align: center;
}

h1 {
  color: #aaaaaa;
  text-align: left;
}

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

header {
  text-align: center;
  display: inline-block;
  border-bottom: 5px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-style: solid;
  border-color: #aaaaaa;
  width: 80%;
  padding: 20px;
  background-color: #e0e0e0;
}

.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;
  width: 50%;
  color: #B2365F;
}

#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;
  box-sizing:border-box; }
}


.tagline {
  margin: 0;
  color: #333333;
  font-size: 1em;
  font-weight: 700;
}

input::placeholder {
  color: #000;
}

textarea::placeholder {
  color: #000;
}

#modifyFilmButton {
  float: right;
}

@media only screen and (max-width: 700px) {
  .row  {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width:800px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }

  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  table tr {
    border: 2px solid #e0e0e0;
    background-color: #e0e0e0;
    display: block;
    margin-bottom: .625em;
    border-radius: 20px;
  }

  table td {
    display: block;
    font-weight: bold;
    font-size: 1.2em;
    text-align: left;
    padding: 15px;
  }

  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

  table td:last-child {
    border-bottom: 0;
  }
}

.oldFilm {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    text-align: left;
    display: inline-block;
    background-color: #AAAAAA;
    width: 80%;
    padding: 20px;
}

#oldTitle {
  width:100%;
  margin-top: 0;
  margin-bottom: 0;
  color: #ff6699;
  padding-bottom: 20px;
}

td {
  padding: 5px;
  font-weight: bold;
}

table {
  border-collapse: collapse;
  text-align: center;
  width: 100%;
}
thead {
  background: #ff6699;
}

.reviewImage {
  width: 200px;
  border-radius: 20px;
}
.filmRow img {
  width: 300px;
  height: 420px;
  margin: 10px;
  border-radius: 20px;
}

.filmRow {
 -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

#filmContainer {
  width: 100%;
  margin-top: 10px;
  display: block;
  position: relative;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
#filmContainer .poster {
  width:45%;
  float:left;
}
#filmContainer .info {
  width:50%;
  float: right;
}
#filmContainer .info label {
  float:left;
  width: 25%;
  padding:0;
  margin: 5px 0;
}
#filmContainer .info p {
  float:left;
  width: 75%;
  margin: 5px 0;
}
#filmContainer .info a {
  display:block;
  padding: 25px 0;
  clear:both;
}
#filmContainer .info p#filmTitle {
  width:100%;
  clear:both;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 20px;
  float: unset;
  text-align:left;
}

#date {
  padding: 5px;
  text-align: left;
  width: 30%;
}

#date input {
  width: auto;
}

#date label {
  display: -webkit-inline-box;
}

#oldTitle2 {
  margin-top: 0;
  margin-bottom: 0;
  color: #ff6699;
}

.genre {
  padding: 5px;
  text-align: left;
  width: 60%;
}

.genre input {
  width:auto;
}

.genre label {
  display: -webkit-inline-box;
}

/* third page */

#filmImage {
  width: 95%;
  height: auto;
  margin: 10px;
  border-radius: 20px;
}

#filmTitle {
    font-weight: 700;
    margin: 0;
    font-size: 3em;
    width: 100%;
    text-align: center;
    color: #B2365F;

}

http://jsfiddle.net/sstracy/vaq60zyp/