Left/Right Alignment with Different Font Sizes in HTML

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!

score 2 · Accepted Answer · answered Apr 26 '18 at 15:00

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>

score 0 · Answer 2 · answered Apr 26 '18 at 14:56

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>

Left/Right Alignment with Different Font Sizes in HTML

2 Answers2