How to get these timestamps that appear in html float right on the same line
I have some markup that I cannot change that looks like this:
<div class="message">
<p class="messageText">Long long long long long long long long long message that wraps</p>
<span class="timestamp">6:30:07 PM</span>
</div>
<div class="message">
...
How can I style this with CSS to look something like this ?:
Long long long long long long 6:30:07 PM
long long long message that wraps
Next message 6:31:58 PM
I want the timestamps to go to the right, right to the right of the post they match.
If the timestamps appeared in front of the messages in the markup, I could just float them right and everything would work fine. How do I do this in my case, given that they appear after the messages?
source to share
Assuming that these timestamps always consist of the same number of characters, and so they will all be (roughly) the same width, positioning them would be a simple solution:
.message { position:relative; padding-right:5em; }
.timestamp { position:absolute; top:0; right:0; }
https://jsfiddle.net/pao17yeb/
padding-right
"fallback" space into which the text of the message cannot flow in so that it is carried over earlier.
If this is not possible, using flexbox to change the order in which items are displayed could be an alternative way to do this.
source to share