对齐具有不同宽度的特定文本？

Question

查看代码片段，如何对齐文本以使 <em> 都在同一行？像这样

em {
margin-left: 25px;
}

<p>Design: <em>lorem ipsum</em></p>
<p>Designsssss: <em>loremloremloremloremipsum</em></p>
<p>Designszzzzzzzzz: <em>ipsum lorem</em></p>
<p>Design and develomment: <em>ipsum</em></p>

Answer 1

p {
  display: flex;
}
em {
  margin-left: auto;
  width: 50%;
}

<p>Design: <em>lorem ipsum</em></p>
<p>Designsssss: <em>loremloremloremloremipsum</em></p>
<p>Designszzzzzzzzz: <em>ipsum lorem</em></p>
<p>Design and develomment: <em>ipsum</em></p>

Answer 2

CSS 表格可以做到这一点：

p {
  display: table-row;
}

em {
  display: table-cell;
  padding-left: 1em;
}

<p>Design: <em>lorem ipsum</em></p>
<p>Designsssss: <em>loremloremloremloremipsum</em></p>
<p>Designszzzzzzzzz: <em>ipsum lorem</em></p>
<p>Design and develomment: <em>ipsum</em></p>

对齐具有不同宽度的特定文本？

Aligning specific text with different widths?

html

css

text

alignment