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

by

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>

More Related Contents:

  1. making div inside div and put it right-bottom corner how?
  2. How to resize an external site to fit into an iframe?
  3. Element not located at bottom of viewport
  4. Center and bottom-align flex items
  5. How to add some non-standard font to a website?
  6. Ignore whitespace in HTML [duplicate]
  7. How to center a button within a div?
  8. Invert CSS font-color depending on background-color
  9. Cross-browser custom styling for file upload button [duplicate]
  10. Fixed Table Cell Width
  11. Why does margin-top work with inline-block but not with inline?
  12. Position: sticky buttons not working in IE 11
  13. Changing Underline color
  14. css “left” not working
  15. :nth-child(even/odd) selector with class [duplicate]
  16. How to CSS: select element based on inner HTML [duplicate]
  17. Using .otf fonts on web browsers
  18. Why does width apply to a button with display inline?
  19. How to center the contents of a div [duplicate]
  20. Equalize the height of left and right div, prevent right div from going below left div
  21. CSS wrong appearance of border-radius on a nested div
  22. Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
  23. How to make the web page height to fit screen height
  24. CSS overflow hidden with absolute position
  25. Why is ‘font-family’ not inherited in ” tags automatically?
  26. Why does “position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto” actually center?
  27. Right align text within Bootstrap 4 breadcrumbs
  28. Aligning to the bottom in flexbox
  29. How to hover only the current li in nested ul?
  30. How to center the element – what to use instead of align:center attribute?

Leave a Comment