.register label{font-weight: 600;}
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 50px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
#fullname {
  display: flex;
  flex-direction: row;
  display: grid;
  
  grid-template-columns: 100%;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-areas: 'firstLabel' 'firstError' 'lastLabel' 'lastError' 'fname' 'fname' 'lname' 'lname'
}

#firstLabel {
  display: grid;
  grid-area: firstlabel;
}

#firstError {
  display: grid;
  grid-area: firstError;
}

#lastLabel {
  display: grid;
  grid-area: lastLabel;
}

#lastError {
  display: grid;
  grid-area: lastError;
}

#fname {
  display: grid;
  grid-area: fname;
  max-width: 100px;
}

#lname {
  display: grid;
  grid-area: lname;
  max-width: 100px;
}