Andrew Alexander Andrew Alexander - 1 month ago 10
CSS Question

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

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

Use flexbox, like this

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

P.S.: If MESSAGE is supposed to go across multiple lines, I would put it in a DIV (instead of span) and restrict it's 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>

Comments