<div>'s not appearing in a 'stack' - html

Question

Sorry if this has been asked, but nothing I found worked in my case.
Here is my current code. I have included more detailed problems there, but basically some of my elements are either not appearing or appearing in unwanted locations.
https://jsfiddle.net/9e8tffh5/2/
<div class="chat">
<div class="bar">
<div class="title">
<span class="name">Random Chat</span>
</div>
</div>
<div class="options">
</div>
<div class="room">
<div class="post other" id="1">
<div class="content">
<span class="note">Hi there!</span>
</div>
<div class="details">
<div class="poster">
<span class="name">Bob</span>
</div>
<div class="time">
<span class="time">9:32</span>
</div>
</div>
</div>
<div class="post self" id="2">
<div class="content">
<span class="note">Hi Bob</span>
</div>
<div class="details">
<div class="time">
<span class="time">12:32</span>
</div>
</div>
</div>
<div class="post self" id="3">
<div class="content">
<span class="note">How are you doing?</span>
</div>
<div class="details">
<div class="time">
<span class="time">9:33</span>
</div>
</div>
</div>
<div class="post other" id="4">
<div class="content">
<span class="note">Great!</span>
</div>
<div class="details">
<div class="poster">
<span class="name">Bob</span>
</div>
<div class="time">
<span class="time">9:32</span>
</div>
</div>
</div>
</div>
<div class="message">
<div class="input">
<input type="text" placeholder="Send a message" />
</div>
</div>
</div>

Answer 1

fiddle
.chat .room .self {
/* position: absolute;
right: 8px; */
text-align: right;
}
.chat .room .self .details {
/* position: absolute;
right: 8px; */
text-align: right;
}