ChrisJJ ChrisJJ - 1 month ago 8
CSS Question

Using CSS, how can align smaller text on right on the same baseline?

What change should I make to this:

<span style='font-size:400%'>left</span>
<span>left</span>


( https://jsfiddle.net/5z3ec48r/60/ ) to get 'right' to align right, but retain its vertical baseline alignment with 'left'?

This:

<span style='font-size:400%'>left</span>
<span style='float:right'>right</span>


( https://jsfiddle.net/xx5ob2m1/) need not apply:

enter image description here

Answer

Put it into a common container, like a div, to which you give these settings, using flexbox (the width can be anything):

.x {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 300px;
}

Here's the fiddle: https://jsfiddle.net/ht4zb79s/1/

Comments