Centering Cloud Icon to Middle Right of Nav Border Background

I'm building a vertical navigation bar and want to add a cloud icon centered at the right border, directly on the background line.

<nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul><div class="cloud-icon"><svg>...</svg></div></nav>

This is the code-pen example. I tried really hard to get this work so any and all feedback would be appreciated.

I've tried to do this with flex-box, css-grid and margins and honestly am quite stuck just getting it to be positioned and stick to the right, let alone be mobile-responsive.