How may I align text to the left and text to the right in the same line

Question

How can I align text so that some of it aligns to the left and some of it aligns to the right within the same line    lt p gt This text should be left-aligned  This text should be right aligned  lt  p gt     I can align all of the text to the left  or to the right   either directly inline  or by using a stylesheet -   lt p style  text-align  left  gt This text should be left-aligned       This text should be right aligned  lt  p gt    How can I align the corresponding text to the left and to the right  while keeping it on the same line

User · Answer

lt h1 gt  left  lt span gt  right  lt  span gt  lt  h1 gt    css   h1 text-align left  width 400px  text-decoration underline   span float right  text-decoration underline

User · Answer

HTML      lt span class  right  gt Right aligned lt  span gt  lt span class  left  gt Left aligned lt  span gt     css      right      float right      left      float left      Demo  http   jsfiddle net W3Pxv 1

User · Answer

HTML FILE    lt div class  left  gt  Left Aligned  lt  div gt    lt div class  right  gt  Right Aligned  lt  div gt    CSS FILE    left     float  left      right     float  right      and you are done

User · Answer

An answer using css flex layout and justify-content  x000D   x000D  p     display  flex    justify-content  space-between    x000D   lt p gt     lt span gt This text is left aligned lt  span gt     lt span gt This text is right aligned lt  span gt   lt  p gt  x000D   x000D   x000D

User · Answer

If you just want to change alignment of text just make a classes   left   text-align  left      and span that class through the text   lt span class  left  gt aligned left lt  span gt

User · Answer

While several of the solutions here will work  none handle overlap well and end up moving one item to below the other  If you are trying to layout data that will be dynamically bound you won t know until runtime that it looks bad   What I like to do is simply create a single row table and apply the right float on the second cell  No need to apply a left-align on the first  that happens by default  This handles overlap perfectly by word-wrapping   HTML   lt table style  width  100    gt     lt tr gt  lt td gt Left aligned stuff lt  td gt         lt td class  alignRight  gt Right aligned stuff lt  td gt  lt  tr gt   lt  table gt    CSS   alignRight     float  right      https   jsfiddle net esoyke 7wddxks5

User · Answer

x000D   x000D   lt p style  text-align left   gt  x000D      This text is left aligned x000D       lt span style  float right   gt  x000D          This text is right aligned x000D       lt  span gt  x000D   lt  p gt  x000D   x000D   x000D    https   jsfiddle net gionaf 5z3ec48r

User · Answer

If you don t want to use floating elements and want to make sure that both blocks do not overlap  try    lt p style  text-align  left  width 49   display  inline-block   gt LEFT lt  p gt   lt p style  text-align  right  width 50    display  inline-block   gt RIGHT lt  p gt

User · Answer

Add span on each or group of words you want to align left or right   then add id or class on the span such as     lt h3 gt   lt span id    makeLeft  gt  Left Text lt  span gt   lt span id    makeRight  gt  Right Text lt  span gt   lt  h3 gt    CSS-   makeLeft  float  left      makeRight  float  right

User · Answer

If you re using Bootstrap try this    lt div class  row  gt       lt div class  col  style  text-align left  gt left align lt  div gt       lt div class  col  style  text-align right  gt right align lt  div gt   lt  div gt

[html] How may I align text to the left and text to the right in the same line?

Examples related to html

Examples related to css