htmlcssflexboxtablecell

align multiple lines across vertical limit without table

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:

This is what I get

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:

Good one

Solution

  • 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: