CSS images not aligning correctly - html

Question

I'm having a problem with my CSS, I assume. I want the picture of the lipstick to align with the face image and have the nail one underneath both of them.
HTML
<center>
<div id="homepage-image preventOverflow homepageHero {{ section.settings.height }} {{ section.settings.color }} index-section">
<div id="left">
<img width=600px type="image/jpeg" src="{{ 'lipstickpink.jpg' | asset_url}}" />
<!-- <img width=600px type="image/jpeg" src="{{ 'shadow.jpg' | asset_url}}" /> -->
</div>
<div id="right">
<div id="top-right">
<img width=900px type="image/png" src="{{ 'faceglam.png' | asset_url}}" />
</div>
<div id="bottom-right">
<img width=600px type="image/jpeg" src="{{ '11_Vertigo_1024x1024.jpg' | asset_url}}" />
</div>
</div>
</div> </center>
CSS
#container {
height: 100%;
width: 100%;
padding-top: $gutter*3;
padding-bottom: $gutter*2;
}
#left > img:nth-of-type(1) {
height: 85vh;
width: 70vw;
}
#left > img:nth-of-type(2) {
height: 65vh;
width: 49vw;
}
#left, #right {
display: inline-block;
}
#top-right, #bottom-right {
display: block;
}
#top-right > img:nth-of-type(1) {
width: 100vw;
height: 100vh;
}
#top-right > img:nth-of-type(2) {
width: 35vw;
height: 60vh;
}
#bottom-right > img:nth-of-type(1) {
width: 60vw;
height: 60vh;
}
#bottom-right > img:nth-of-type(2) {
width: 20vw;
height: 25vh;
}
I have also provided an image of the problem:

Answer 1

It's not completely clear how (i.e in which direction) you want them aligned.
You have a lot of seemingly unnecessary divs - i wondered why.. so I have adjusted both HTML and CSS (used own images from internet)
If I got them in the wrong order, just adjust the images. I adjusted heights (re-adjustable obviously)- but hope you get the general gist!
Hope this helps
#container {
height: 100%;
width: 100%;
margin: 0;
padding-top: $gutter*3;
padding-bottom: $gutter*2;
}
#left{
margin-left:10%;
margin-right:10%;
}
#left > img:nth-of-type(1) {
max-height:200px;
padding:5px;
height:auto;
}
#left > img:nth-of-type(2) {
max-height:300px;
padding:5px;
height: 60vh;
}
#left,
#right {
display: inline-block;
}
#right > img:nth-of-type(1) {
max-height:300px;
height: auto;
margin-left:18vw;
margin-right:18vw;
}
<div id="container">
<div id="left">
<img src="https://lh3.googleusercontent.com/czZtMqTum5GQOYL1NxogiEVZ57Zr5LG0chnil-p3YFTjl3WIQdrADqpaaATmyN-JGjey=h900" alt="face" />
<img src="http://bpc.h-cdn.co/assets/16/38/480x480/gallery-1474299136-urban-decay-vice-pink-lipstick.jpg" alt="lipstick" />
</div>
<div id="right">
<img src="http://www.vipera.com.pl/wp-content/uploads/2016/08/20zestawy_lakier__w_do_artystycznego_zdobienia_paznokci________artistic_manicure_set___219.jpg" alt="nails" />
</div>
</div>
Fiddle