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:

|--         


        

Answer 1

Johannes Flexbox approach is probably the best way, but without using that, or float as you requested, you could do something like this:

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

And then:

#HASH {
  width: 100%;
}

#HASH div {
  width: 49%;
  display: inline-block;
}

#right {
  text-align: right;
}

https://jsfiddle.net/ak7zxz84/

Again, I'd go with Flexbox, but this is just an alternate solution.

Answer 2

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>

Answer 3

If you want it fixed to the bottom (or another) area of the screen, why not use fixed positioning, such as:

#time-HASH {
position: fixed;
bottom: 0;
left: 0;
}

.ios-circle {
position: fixed;
bottom: 0;
right: 0;
display: inline-block; //if you need this

}