I have a container div with two child divs inside. The first child div has a fixed width, but its height depends on the content (a message box). Right next to it on the same line, I want another div (displaying the time) to be at the bottom of the parent div, aligned with the lowest line of the message in the first child div.
I'm looking to achieve something like this:
Do you see how the time is positioned next to the message?
In order to accomplish this, I believe I should make the time div the size of the parent div. How do I go about achieving that?
Thank you for your help in advance!
This is the HTML structure:
<div class="yellowmessage">
<div class="themessage">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</div>
<div class="dateandtime">11:37AM</div>
</div>
And here is the corresponding CSS:
.yellowmessage { /* Parent div */
padding:0 2% 0 0;
float:left;
}
.themessage {
font-size:2.5em;
display: inline-block;
border-radius:20px;
padding:3% 0 3% 0;
max-width:90%;
background-color:rgb(246,227,143);
float:left;
}
.dateandtime {
float:left;
}