CODEWITHSUNDEEP
htmlcsstextalignment
Zanic L3
Zanic L3

Reputation: 1088

Aligning specific text with different widths?

See snippet, how can I align the text so the <em> 's are all on the same line? Like this

enter image description here

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>

Upvotes: 0

Views: 43

Answers (2)

Paulie_D
Paulie_D

Reputation: 115046

CSS Tables can do that:

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>

Upvotes: 0

Rio A.P
Rio A.P

Reputation: 1395

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>

Upvotes: 1

Related Questions