How to keep a <hr> in the bottom of element?

div {
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  min-height: 100px;
  position: relative;
}
div hr {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
}

<div>this is a test<hr></div>

div {
  position: relative;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  min-height: 100px;
}
div:after {
  content: "";
  position: absolute;
  left: 0;
  right: 20px; /*0 without gap*/
  bottom: 0;
  border-bottom: 1px solid;
}

<div>this is a test</div>