aligning multiple div, img and text in CSS - problems - css

Question

I'm trying to align several DIVS, Images and text and I can't figure this out..
Here's what I'm trying to achieve:
Heres' my HTML
<div class="section5">
<div class="outer">
<div class="container1">
<img src="icon.png" width="85">
<div class="title1">Text</div>
<div class="subtitle1">Text</div>
</div>
<div class="container2">
<img src="iphone.png" width="375">
<div class="subtitle2">Text</div>
</div>
</div>
</div>
Here is my CSS:
.section5{ height: 525px; background-color: #5e6172; text-align: center; position: relative;}
.outer{ width: 80%; background-color: #45da45; height: 100%; margin: 0 auto; position: relative;}
.title1{color: #ffffff; font-size: 2.6em; font-family: h35; }
.subtitle1{color: #ffffff; font-size: 1.5em; font-family: h35; margin-top: 0.25em; }
.subtitle2{color: #ffffff; font-size: 1.5em; font-family: h35; margin-top: 0.25em; }
.container1{display: block; background-color: #ccc; }
.container2{display: block; background-color: #fffc1e; }
Here is the JSFIDDLE:
http://jsfiddle.net/mib92/hogwohf8/
My current problems:
1) My text at the bottom needs to be on the right side of the image.. center like in my example image.
2) the bottom of my bottom picture must be align to the bottom of container2 AND the bottom of section5
3) While doing this, the container 1 must remain in the vertical middle of the remaining space of the section5.
Thank you

Answer 1

I hops it's help you.
.section5 {
height: 525px;
background-color: #5e6172;
text-align: center;
position: relative;
}
.outer {
width: 80%;
background-color: #45da45;
height: 100%;
margin: 0 auto;
position: relative;
}
.title1 {
color: #ffffff;
font-size: 2.6em;
font-family: h35;
}
.subtitle1 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.subtitle2 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.container1 {
display: block;
background-color: #ccc;
}
.container2 {
display: block;
background-color: #fffc1e;
}
.right-sied {
display: inline-block;
vertical-align: top;
width: 41%;
}
.left-sied {
display: inline-block;
width: 49%;
}
.left-sied img {
max-width: 100%;
}
<div class="section5">
<div class="outer">
<div class="container1">
<img src="icon.png" width="85">
<div class="title1">Text</div>
<div class="subtitle1">Text</div>
</div>
<div class="container2">
<div class="left-sied">
<img src="iphone.png" width="375">
</div>
<div class="right-sied">
<div class="subtitle2">Text</div>
</div>
</div>
</div>
</div>
Live Demo

Answer 2

check this:
.section5 {
height: 525px;
background-color: #5e6172;
text-align: center;
position: relative;
}
.outer {
width: 80%;
background-color: #45da45;
height: 100%;
margin: 0 auto;
position: relative;
}
.title1 {
color: #ffffff;
font-size: 2.6em;
font-family: h35;
}
.subtitle1 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.subtitle2 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.container1 {
display: block;
background-color: #ccc;
}
.container2 {
display: block;
background-color: #fffc1e;
}
.container1 .wrapper {
display: inline-block;
float: right;
}
.container2 img {
margin: 0 auto;
}
<div class="section5">
<div class="outer">
<div class="container1">
<img src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" width="85">
<div class="wrapper">
<div class="title1">Text</div>
<div class="subtitle1">Text</div>
</div>
</div>
<div class="container2">
<div class="subtitle2">Text</div>
<img src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" width="375">
</div>
</div>
</div>