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

Solution 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;
}

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

Solution 2:

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

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

And then:

#HASH {
  width: 100%;
}

#HASHdiv {
  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.

Solution 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

}