How to indent text while preserving vertical alignment?

Question

I'm struggling to implement a layout similar to the following image:

I have a box with two text elements (say two <span>s) in it, the one of the left has a slightly smaller font size than the one on the right. Normally, in cases like this, if you want to center-align two text elements with different font sizes, you'd use vertical-align: middle on both. This works, of course, but it only works if the elements are both inline, and if they're inline, then when the text on the right is wrapped (i.e. broken into multiple lines), all the other lines start from the beginning, like this:

But this isn't what I want, I want the second piece of text (the one on the right) to start where the left text ends for all the lines. Just like in the first image above.

Now, obviously the first impulse is to implement this using flexbox, but the problem with that approach is that using vertical-align: middle on the two text elements would no longer work and you'd have no way of center-aligning the smaller text on the left with the first line of the text on the right vertically.

Example:

body {
  background-color: #EDEEEF;
  font-family: sans-serif;
}

.note {
  margin-bottom: 20px;
  opacity: 0.5;
}

.box {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  padding: 20px 30px;
  display: flex;
}

.left {
  color: gray;
  font-size: 14px;
  flex-shrink: 0;
  margin-right: 15px;
}

.right {
  font-size: 22px;
}

<p class="note">
  Notice how the text "Section 1." is not vertically aligned with the first line of the text on the right:
</p>

<div class="box">
  <span class="left">Section 1.</span>
  <span class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua?</span>
</div>

Any suggestions?

Answer 1

Use a pseudo element having the same font-size as the big text to recreate the initial situation and you can use vertical-align

body {
  background-color: #EDEEEF;
  font-family: sans-serif;
}

.note {
  margin-bottom: 20px;
  opacity: 0.5;
}

.box {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  padding: 20px 30px;
  display: flex;
}

.left {
  color: gray;
  font-size: 14px;
  flex-shrink: 0;
  margin-right: 15px;
}

.left:before {
  content: "";
  vertical-align: middle;
}

.right,
.left:before {
  font-size: 22px;
}

<p class="note">
  Notice how the text "Section 1." is not vertically aligned with the first line of the text on the right:
</p>

<div class="box">
  <span class="left">Section 1.</span>
  <span class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua?</span>
</div>

Answer 2

Try giving your box class a line-height so each span shares the same baseline, though they're different font sizes.

body {
  background-color: #EDEEEF;
  font-family: sans-serif;
}

.box {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  padding: 20px 30px;
  display: flex;
  line-height: 27px;
}

.left {
  color: gray;
  font-size: 14px;
  flex-shrink: 0;
  margin-right: 15px;
}

.right {
  font-size: 22px;
}

<div class="box">
  <span class="left">Section 1.</span>
  <span class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua?</span>
</div>

Answer 3

Add align-items: baseline; to .box

.box {
   background-color: white;
   border-radius: 10px;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
   padding: 20px 30px;
   display: flex;
   align-items: baseline;
 }

body {
  background-color: #EDEEEF;
  font-family: sans-serif;
}

.note {
  margin-bottom: 20px;
  opacity: 0.5;
}

.box {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  margin: .25rem;
  padding: 20px 30px;
  display: flex;
  align-items: baseline;
}

.left {
  color: gray;
  font-size: 14px;
  flex-shrink: 0;
  margin-right: 15px;
}

.right {
  font-size: 22px;
}

<p class="note">
  Notice how the text "Section 1." is now vertically aligned with the first line of the text on the right:
</p>

<div class="box">
  <span class="left">Section 1.</span>
  <span class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua?</span>
</div>

Answer 4

Try with this:

body {
  background-color: #EDEEEF;
  font-family: sans-serif;
}

.note {
  margin-bottom: 20px;
  opacity: 0.5;
}

.box {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  padding: 20px 30px;
  display:flex;
  align-items: start;
}

.left {
  color: gray;
  font-size: 14px;
  padding-top: 2px;
  min-width: fit-content;
  margin-right: 15px;
}

.right {
  font-size: 22px;
}

<p class="note">
  Notice how the text "Section 1." is not vertically aligned with the first line of the text on the right:
</p>

<div class="box">
  <span class="left">Section 1.</span>
  <span class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua?</span>
</div>

Answer 5

You can use CSS Grids to achieve this functionality. If you don't know about CSS Grids, it is a very helpful utility in CSS and it will be used in almost every webpage. I highly suggest you to learn CSS Grids from w3Schools. See how it works:

.box{
    display: grid;
    grid-template-columns: 100px auto;
}

That's it, see the changes and you'll be amazed and now you can do further changes to alignment. Meanwhile, (if you don't have much time to learn CSS Grids) you can continue with creating a table and the adding the two span elements in a single row, but different cells.