html - How to have two items on opposite sides on the same line

Question

I'm trying to get two different pieces of text on opposite ends of the "page" so to speak for a mobile app.

I would like it to look like this:

|-----------------------------|
|DATE                  MESSAGE|

But on the same line.

Currently I've got it setup like this:

<div id="HASH" class="blue-msg">
<span id="time-HASH" class="smalltext">9 months 2 weeks ago</span>
<span class="ios-circle">MESSAGE HERE</span>
</div>

With the ios-circle span having display: inline-block set.

MESSAGE can also go on for multiple lines (like an iOS chat window), like so:

|-----------------------------|
|DATE                  MESSAGE|
|                      MESSAGE|

I don't care if the DATE text is aligned near the top of the message or near the center of the message. Either would look fine to me.

How do I do this? I would very much prefer to not use a float if possible.

Answer 1

Use flexbox, like this

#HASH {
  display: flex;
  justify-content: space-between;
}

P.S.: If the "MESSAGE HERE" content is supposed to expand across multiple lines, I would put it in a div (instead of span) and restrict its width to 50% (adjust value as you like).

#HASH {
  display: flex;
  justify-content: space-between;
}

<div id="HASH" class="blue-msg">
<span id="time-HASH" class="smalltext">9 months 2 weeks ago</span>
<span class="ios-circle">MESSAGE HERE</span>
</div>