alignement de div variables

Aligner verticalement les div sur l'élément <HR /> qu'elles contiennent. PS :

HTML

<div id="main">
  J'aimerais que les éléments suivants soient alignés verticalements par rapport à l'élément HR qu'elles contiennent.<br />
  <div class="container">
    Lorem ipsum dolor sit amet,consectetur
    <hr />adipiscing elit. Sed non risus.
  </div>
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
    <hr />non risus. Suspendisse le
  </div>
  <div class="container">
    g elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing
    <hr />nec,
  </div>
  <div class="container">
    se lectus tortor, dignissim sit amet,
    <hr /> adipiscing nec, ultricies sed, dolor. Cras
  </div>
  <div class="container">
    Lorem ipsum dolor sit amet. Suspendisse lectus tortor, dignissim
    <hr />sit amet, adipiscing nec, ultricies sed, dolor. Cras
  </div>
  <div class="container">
    adipiscing
    <hr />nec, ultricies sed, dolor. Cras
  </div>
  <div class="container">
    Sed non risus. Suspendisse lectus tortor,
    <hr />dignissim sit amet, adipiscing nec
  </div>

</div>

CSS

#main {
  width: 100%;
}
hr {width:100%;}
div.container {
  display: inline-grid;
  grid-template-rows: 1fr auto 1fr;
  width: 120px;
  border: 1px solid black;
  margin: 5px;
  vertical-align: middle;
}