* {
box-sizing: border-box;
}
.parent {
display: flex;
justify-content: space-between;
}
.parent > div {
background-color: #eee;
width: calc(95% / 4);
padding: 20px;
}
<body>
<div class="parent">
<div>
<span>Product One</span>
<div>This is Product</div>
</div>
<div>
<span>Product Two</span>
<div>This is Product</div>
</div>
<div>
<span>Product Three</span>
<div>This is Product</div>
</div>
<div>
<span>Product Four</span>
<div>This is Product</div>
</div>
</div>
</body>
Using can use div to move the text to a new line as div acts as a block element
I want the texts “this is product” to be below the other texts that start with “product”. How can I do this?
I tried to put the strings in the <p> element, but it didn’t work, and I also set the display:block property for the <span> element, but it also didn’t work.
Do I put the texts in the <div> element?
the code i used :
* {
box-sizing: border-box;
}
div {
display: flex;
justify-content: space-between;
}
div > div {
background-color: #eee;
width: calc(95% / 4);
padding: 20px;
}
<body>
<div class="parent">
<div>
<span>Product One</span>
<span>This is Product</span>
</div>
<div>
<span>Product Two</span>
<span>This is Product</span>
</div>
<div>
<span>Product Three</span>
<span>This is Product</span>
</div>
<div>
<span>Product Four</span>
<span>This is Product</span>
</div>
</div>
</body>
it should be enough to just change the first rule with div.parent and nothing else
@Lety if the line is too long (or too short), the second span will start after the previous one …
yes, you are right. I could be possible to change span with a block element.
