Left/Right Alignment with Different Font Sizes in HTML [duplicate]

Question

I am trying to have left and right alignment in my HTML. It works fine when the fonts are the same size, but they do not align when the fonts are different sizes.

.right {
  float: right;
  display: inline
}

.left {
  float: left;
  font-size: 300%;
  display: inline
}

<span class="left">Left Alignment</span>
<span class="right"> Right Alignment</span>

I would like the two spans to be aligned by the bottom of the text. Can somebody please help me with this?

Thanks!

Friday Ameh · Accepted Answer · 2018-04-26 15:00:45Z

2

You can use flex-box with the align-items:baseline; property

div{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px;
}

.left{
    font-size: 300%;
}

<div>
<span class="left">Left Alignment</span>
<span class="right"> Right Alignment</span>
</div>

answered Apr 26, 2018 at 15:00

Friday Ameh

1,6841 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paulie_D · Accepted Answer · 2018-04-26 14:56:00Z

0

Flexbox can do that...but it requires a wrapper element.

.left {
  font-size: 300%;
}

div {
  width: 90%;
  margin: 1em auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 2px solid grey;
}

<div>
  <span class="left">Left Alignment</span>
  <span class="right"> Right Alignment</span>
</div>

answered Apr 26, 2018 at 14:56

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

Collectives™ on Stack Overflow

Left/Right Alignment with Different Font Sizes in HTML [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related