I'm trying to get both the `<hr>` to transition but I'm limited to selecting only the lower `<hr>` using css.  

```css
html {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  background-color: red;
}

hr {
  transition: width 1s;
  width: 5rem;
}

#container {
  width: 50%;
  height: 100%;
  padding: 5rem;
  background-color: white;
  margin: auto;
}

#expand {
  width: 100%;
  height: 100px;
  background: red;
  transition: height 1s;
  text-align: center;
}

#expand:hover {
  height: 200px;
}

#expand:hover~hr {
  width: 20rem;
}
```

```html
<div id="container">
  <hr>
  <div id="expand">
    Learn More
  </div>
  <hr>
</div>
```

Is there any anyway to make both the `<hr>` transition using simple javascript?  

If not then which js library should I use?