I have a required layout to construct and it is turning out to be much harder than what I thought to accomplish it. I included a diagram showing how it needs to look. My task seems simple enough, but I can't get it right. The biggest issue is getting div D to align to the bottom of div A ***without*** using absolute positioning (that messes up my page). Also related to this would be the need to make div A's height equal to div B's height, even when there is less content in it compared to the content in div B.

My diagram:
<http://tinypic.com/r/sxln60/8>

HTML:

```
<div class="container">

<div class="A">
<div class="C">Align to top</div>
<div class="D">Align to bottom</div>
</div><!--end A-->

<div class="B">
<img src="images/picture.jpg"/>
</div><!--end B-->

</div><!--end container-->

```

CSS:

```
.container {border: 1px solid #999; width:49%; box-sizing:border-box;  display: inline-block; padding: 20px; vertical-align: top;} /*This container is an inline element with another neighboring inline-block element*/
.A {width:39%; display:inline-block; vertical-align: top;}
.C {font-size: 1.5em;}
.B {width:60%; display:inline-block; vertical-align: top;}
.D {font-size: 1.2em;}

```

This is somewhat of a challenge. Hopefully someone can rise to it. I certainly can't. I understand that these are not brand new topics, but they seem to be a unique combination of them in one task. Any help would be greatly appreciated. Thanks.