How to make divs equidistant on CSS3? - html

Question

I have tried searching around and what I found was either for a set of divs side by side of equal size, or too complicated to adapt to my scenario.
I have a container div with a main div and images div. The main div contains a large blue box with text, while the images div contains two stacked images of different sizes. I want the distance between the main div, the images divs and the right hand side of the page to remain constant while making sure the main div resizes to not go over the sidebar.
All the code is on this codepen: https://codepen.io/1s2s2p/pen/rdJawE
Shortened down code:
HTML:
<div id="container">
<div id="image4">
<img style="width: 80%; height: 80%;" src="https://achievement-images.teamtreehouse.com/badges_intro_to_html_css_stage-01.png">
</div>
<div id="image5">
<img style="width: 80%; height: 80%;" src="http://wwwcdn.howdesign.com/wp-content/uploads/HTML5-CSS31.jpg">
</div>
<div class="main">
<!--Lot of text here-->
</div>
</div>
CSS:
.main {
padding: 21px 6px 6px;
font-weight: bold;
background-color: #66cccc;
float: right;
clear: both;
display: block;
visibility: visible;
z-index: 0;
width: 58%;
position: relative;
top: 167px;
left: -214px;
}
.images {
margin-right: auto;
margin-left: auto;
right: 8px;
padding-top: 156px;
position: absolute;
}
I have an images2 div which is used in the same way but with different images.