Child div next to the parent div, at the bottom

Question

I have three divs. A container div, that contains two child divs inside. The first child div has a fixed width, but height should be determined by the text inside (it's a message box). Right after that div on the same line, should be another div one line high (basically, the time) and it should be located at the bottom of the parent div (like, if the first child div contains say 5 lines, then the second child div must be right after the first child div, at the level of the lowest line of the first child (of the message box))

Basically, I'm trying to recreate this thing:

Notice how the time is right next to the message?

Anyway, for this I figured I needed to make my time div the size of the parent div. How would I go about doing it?

Thanks in advance

So, this would be the HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod </p>

</div>
<div class = "dateandtime">11:37AM</div>
</div>

And 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;
}

Answer 1

Fiddle

Assuming that this is your HTML structure:

<div class="yellowmessage clear">
    <div class="themessage">
        <p contenteditable="true">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
    </div>
    <div class="dateandtime">11:37AM</div>
</div>
<div class="bluemessage clear">
    <div class="themessage">
        <p contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare risus vulputate consequat semper. Quisque facilisis facilisis pulvinar. Maecenas aliquam, orci id rhoncus tempus, lacus tellus mattis diam, eget elementum eros dui vel leo.</p>
    </div>
    <div class="dateandtime">11:49AM</div>
</div>

This could be your CSS

.yellowmessage, .bluemessage {
    position: relative;
    margin: 5% 2%;
}
.themessage {
    font-size:1.85em;
    border-radius:20px;
    padding: 0 2%;
    max-width: 90%;
    box-shadow: inset 0 -4px rgba(0, 0, 0, 0.07), inset 0 22px 25px rgba(255, 255, 255, 0.58), 0 3px 11px rgba(0, 0, 0, 0.28);
}
.yellowmessage > .themessage {
    float: left;
    background-color: #FFF980;
}
.bluemessage > .themessage {
    float: right;
    background-color: #A7DBD8;
}
.dateandtime {
    position: absolute;
    bottom: 0;
    font-size: 80%;
}
.bluemessage > .dateandtime {
    left: 0;
}
.yellowmessage > .dateandtime {
    right: 0;
}

Answer 2

You can use this, There is an answer here about your question.

I have added time to that. I have done some changes.

Live Demo **http://jsfiddle.net/mek5Z/1348/**