Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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.

like image 381
Steven Matthews Avatar asked Oct 17 '16 16:10

Steven Matthews


People also ask

How do I put two things side by side?

The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.

How do you put two things on the same line in HTML?

To get all elements to appear on one line the easiest way is to: Set white-space property to nowrap on a parent element; Have display: inline-block set on all child elements.

How do I display text on the same line?

The best way to use is white-space: nowrap; This will align the text to one line.

How do I align two text side by side in HTML?

To set text alignment in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property text-align for the center, left and right alignment.


1 Answers

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>
like image 138
Johannes Avatar answered Sep 20 '22 07:09

Johannes