body {
  background-color: grey;
}
[class*="col-"] {
  float: left;
  padding: 15px;
}
/* 
example:
grid-row: 1/2;
grid-column: 1/6;
*/

#wrapper {
  display: grid;
  margin-left: 12%;
  margin-right: 12%;
  margin-top: 4%;
  grid-template-columns: 600px, 600px;
  grid-template-rows: 100px, 200px, 300px, 100px;
  background-color: #bbb;
  border-radius: 8px;
}

#title{
  grid-column: 1/3;
  grid-row: 1/2;
  display: flex;
  align-items: center;
  justify-content: center;
}

#SurveyTypeRadio{
grid-column: 1/2;
grid-row: 2/3;
display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

#TrendofSoundingRadio{
  grid-column:2/3 ;
  grid-row: 2/3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;

}

#LeftTextInputArea{
  grid-column: 1/2;
  grid-row: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column wrap;
  padding: 15px;

}

#RightTextInputArea{
  grid-column: 2/3;
  grid-row: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column wrap;
  padding: 15px;


}


#submitButton{
  grid-column: 1/3;
  grid-row:4/5 ;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}