align multiple lines across vertical limit without table

Question

I build a ecommerce website and have multiple p tag that describe the product. I want that the product description will be align according to vertical line no matter the size of the word that precedes it. I want to know if this is possible to achieve this using perhaps flexbox or something like that but not table.

What I have now using gap and flexbox:

Code:

p
{
    display:flex;
    gap: 50px;
}
<p><span> Material:</span> <span > 18k Gold Plating</span></p>
<p><span> One:</span> <span > 18k Plating</span></p>
<p><span> Twotwo:</span> <span > 18k Yellow Plating</span></p>
<p><span> threethree:</span> <span > 18k Gold Plating</span></p>
<p><span> Four:</span> <span > 18k Gold</span></p>

What I want:

Answer 1

The easiest method, in browsers that don't support grid-template-columns: subgrid would be to wrap the elements in a container – in the following code I used a <main> element – with display: grid and with the <p> elements set to display: contents, which effectively pretends that the <p> elements aren't there, or are "invisible" to the DOM and layout:

*, ::before,::after {
  box-sizing: border-box;
  font-size: 16px;
  font-family: system-ui;
  margin: 0;
  padding: 0;
}

main {
  inline-size: clamp(20em, 80vw, 1000px);
  margin-block: 1em;
  margin-inline: auto;
  
  /* implementing grid display on the <main> element: */
  display: grid;
  /* setting the gap between adjacent rows to 0.5em and
     between adjacent columns to 1em: */
  gap: 0.5em 1em;
  /* setting the width of the first column to "min-content"
     to have the column take the smallest necessary width,
     and the second column can take the remaining space: */
  grid-template-columns: min-content 1fr;
}

p {
  display: contents;
}

<main>
  <p><span>Material:</span><span>18k Gold Plating</span></p>
  <p><span>One:</span><span>18k Plating</span></p>
  <p><span>Twotwo:</span><span>18k Yellow Plating</span></p>
  <p><span>threethree:</span><span>18k Gold Plating</span></p>
  <p><span>Four:</span><span>18k Gold</span></p>
</main>

JS Fiddle demo.

References:

• display.
• gap.
• grid-template-columns.
• inline-size.
• margin-block.
• margin-inline.

Answer 2

You can add fixed width to the first span of every p element, in px or % to start 2nd span from the same spot.

p span:first-child {
  min-width: 50%;
}

or you can also use table css properties without using table html like this.

p {
    display: table-row;
}
p span {
    display: table-cell;
}

Answer 3

Using Flexbox, an elegant way to do it would be to have 2 different divs for your columns, with justify-content: flex-start applied to it. You can also play with the column width if it's needed:

HTML:

  <div class="container">
    <div class="column">
      <p>Material:</p>
      <p>Beads:</p>
    </div>
    <div class="column">
      <p>18k Gold Plating</p>
      <p>2 Charms</p>
    </div>
  </div>
</div>

CSS:

.container {
  display: flex; /* or inline-flex */
  justify-content: flex-start; /* or space-around, depending on if you want even space around them */
}

.column {
  width: 50%;
}

Answer 4

This solution is based on considering you will not change your existing html (which is not very cool at all xD) Lets use css grid

p
{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

<p><span> Material:</span> <span > 18k Gold Plating</span></p>
<p><span> One:</span> <span > 18k Plating</span></p>
<p><span> Two:</span> <span > 18k Yellow Plating</span></p>
<p><span> Three:</span> <span > 18k Gold Plating</span></p>
<p><span> Four:</span> <span > 18k Gold</span></p>