CSS Layout Issue - Vertical Align: Bottom; and Scaling issues - html

Question

We have two boxes associated with What's Nearby, and Crafting the Perfect Villa Vacation. We would like the left (What's Nearby) box to act very similar to the right (Crafting the Perfect Villa Vacation) box, in that the left box should scale while aligned to the top of the gray container. We have tried many methods, and are coming up short! So basically, the left box should be able to scale while being vertically aligned to the bottom, as the right box does.
Here is our code...
HTML:
<div id="whats-nearby">
<h1>What's Nearby</h1>
<div class="orange-triangle-180"><img src="images/orange-triangle.png"/></div>
<img src="images/whats-nearby.jpg"/>
</div>
<div id="crafting-villa-vacation">
<h1>Crafting the perfect villa vacation</h1>
<div class="orange-triangle-180"><img src="images/orange-triangle.png"/></div>
<img src="images/crafting-villa-vacation.jpg"/>
<h3 class="share-property">Share This Property</h3>
</div>
CSS:
#crafting-villa-vacation {
float: right;
width: 52%;
display: table;
margin-right: 3%;
margin-top: 200px;
margin-bottom: -119px;
}
#crafting-villa-vacation .orange-triangle-180 img{
position: absolute;
top: -18px;
right: 10px;
width: 35px;
}
#crafting-villa-vacation img {
width: 100%;
float: left;
display: table-cell;
vertical-align: bottom;
}
#whats-nearby {
position: absolute;
bottom: 0;
top: 584px;
left: 60px;
z-index: 1;
width: 27%;
}
#whats-nearby img {
width: 100%;
display: table-cell;
}
#whats-nearby .orange-triangle-180 img{
width: 35px;
position: relative;
bottom: 18px;
right: 5px;
margin-right: 420px;
}

Answer 1

See what you can do with this. I messed around with it for a little bit. I got pretty close.
HTML:
<div id="whats-nearby">
<h1>What's Nearby</h1>
<div class="orange-triangle-180"><img src="images/orange-triangle.png"></div>
<img src="images/whats-nearby.jpg">
<h3 class="share-property"></h3>
</div>
CSS:
#crafting-villa-vacation {
float: right;
width: 52%;
display: table;
margin-right: 3%;
margin-top: 200px;
margin-bottom: -119px;
}
#crafting-villa-vacation h1 {
color: #f26649;
text-transform: uppercase;
font-family: 'Minerva', serif;
text-align: left;
padding-bottom: 10px;
font-size: 18px;
}
#crafting-villa-vacation .orange-triangle-180 img{
position: absolute;
top: -18px;
right: 10px;
width: 35px;
}
#crafting-villa-vacation img {
width: 100%;
float: left;
display: table-cell;
vertical-align: bottom;
}
#whats-nearby {
float: left;
width: 27%;
display: table;
margin-left: 5%;
margin-top: 200px;
margin-bottom: -91px;
}
#whats-nearby h1 {
color: #f26649;
text-transform: uppercase;
font-family: 'Minerva', serif;
text-align: right;
padding-bottom: 10px;
font-size: 18px;
}
#whats-nearby .orange-triangle-180 img{
position: absolute;
width: 35px;
}
#whats-nearby img {
width: 100%;
float: left;
display: table-cell;
vertical-align: bottom;
}
#whats-new h3.share-property {
background-color: #0073AE;
text-transform: uppercase;
font-size: 15px;
text-decoration: underline;
color: #fff;
width: 200px;
padding: 5px 10px;
position: relative;
top: -28px;
left: 0;
font-family: 'Minerva', serif;
clear: both;
}

Answer 2

This is what worked for me. See if this will help out. It's very similar to the box floating to the right but instead it floats left with a little different values for positioning.
#whats-nearby {
float: left;
width: 27%;
display: table;
margin-left: 60px;
margin-top: 73px;
margin-bottom: -119px;
}