.flex-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

#sortable { 
  list-style-type: none;
  line-height:1;
  margin-left:30px;
  width:100%;
}

#sortable li {
  margin-right:2px;
  padding: 10px; 
  font-size: 1em; 
  border: 2px solid black; 
  border-radius:0.5em; 
  display:inline;
  background-color:white;
  margin-left:8px;
  white-space:nowrap;
}

#dragWithinTextContent {
  margin:50px;
}

#drag {
  margin-top:50px;
  margin-bottom:90px;
}

#dragWithinTextHeading {
  margin-bottom:30px;
}

#dragWithinTextNext {
  margin-left:85%;
  margin-top:-30px;
  position:absolute;
}

#dragWithinTextCheck {
  margin-left:440px;
  margin-top:-60px;
  position:absolute;
}

#dragWithinTextErrorMessage {
 margin-top:-45px;
 margin-left:-2px;
}

#subject, #predicate {
  border:3px lightblue solid;
  width:max-content;
  display:inline-block;
  padding:10px;
}

#sentence {
  border:3px lightsalmon solid;
  width:max-content;
  display:inline-block;
  padding:10px;
  margin-right:10px;
  margin-top:2px;
}

#boxes {
  margin-top:40px;
}

@media only screen and (max-width: 625px) {
  #dragWithinTextCheck {
    margin-left:68%;
  }
}