<div class="elmt-block">
<p> paragraph display block</p>
<p> paragraph display block 2</p>
</div>
<div class="elmt-inline">
<p> paragraph display inline</p>
<p> paragraph display inline 2</p>
</div>
<div class="elmt-grid">
<p> paragraph display grid</p>
<p> paragraph display grid 2</p>
</div>
<div class="elmt-flex">
<p> paragraph display flex</p>
<p> paragraph display flex 2</p>
</div>
<div class="elmt-none">
<p> paragraph display none</p>
<p> paragraph display none 2</p>
</div>
p {
border: 1px solid red;
padding: 2px;
}
.elmt-block p {
display: block;
}
.elmt-inline p {
display: inline-block;
}
.elmt-grid p {
display: grid;
}
.elmt-flex p {
display: flex;
}
.elmt-none p {
display: none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.