HTML big text and have 2 lines of small text next to it?-CodePudding

I want the text to look like:

My code is

.number {
  font-size: 32px;
  display: inline;
}

.top {
  display: inline;
}

<div class="top">
  <p class="number" id="num">12</p>
  <p style="display: inline;" id="month">Oct</p>
  <p style="display: inline;" id="year">2021</p>
</div>

with default text size being 16px, and the big 12 in the picture is 32px. I currently have it that it shows How do I make the 2021 text appear on a new line, while having the 12 text be to the left of these 2 lines? Note, removing the inline makes them appear below the 12.

CodePudding user response：

I would suggest you use flex instead of inline.

This way you can control the spacing between left and right elements more easily using gap.

In this example I also adjusted the line-height of the month and year to account for the height of the 12 but this is optional based on what you want the look to be.

p {
  margin: 0;
  font-size: 1rem
}

.number {
  font-size: 2rem;
}

.top {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.right p {
  line-height: .9
}

<div class="top">
  <p class="number" id="num">12</p>
  <div class="right">
    <p id="month">Oct</p>
    <p id="year">2021</p>
  </div>
</div>