textarea {
  white-space: pre;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  width: 100%;
}

#wrapper {
  /* width is always 100% and always aligned to bottom */
  width: 100%;
  position: relative;
  bottom: 0;
  left: 0;
  display: table;  /* ******** ADDED ******** */
}
.hist {
  /* show on the right; width always set, height equal to #left's height */
  float: left;
  /* height: 50px; */
  min-width: 49%;
  display: table-column;   /* ******** ADDED ******** */
}
@media screen and (max-width: 570px) {   /* ******** ADDED ******** */
  .hist {
    float: left;
    min-width: 100%;
    display: table-column;
  }
}