JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Siblings have <code>margin: 1em</code></h2>

<h3>Siblings have nothing. Margin collapse.</h3>
<div class="parent">
    <p class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat enim ducimus accusantium recusandae quidem velit quasi voluptatibus voluptatum dolores voluptate in eos delectus fugit odit est reiciendis at? Impedit cupiditate.</p>
    <p class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat enim ducimus accusantium recusandae quidem velit quasi voluptatibus voluptatum dolores voluptate in eos delectus fugit odit est reiciendis at? Impedit cupiditate.</p>
</div>

<h3>Siblings have <code>float: left; clear: left</code>. Fixed.</h3>
<div class="parent">
    <p class="child float">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat enim ducimus accusantium recusandae quidem velit quasi voluptatibus voluptatum dolores voluptate in eos delectus fugit odit est reiciendis at? Impedit cupiditate.</p>
    <p class="child float">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat enim ducimus accusantium recusandae quidem velit quasi voluptatibus voluptatum dolores voluptate in eos delectus fugit odit est reiciendis at? Impedit cupiditate.</p>
</div>

<h3>Siblings have <code>display: inline-block</code>. Fixed.</h3>
<div class="parent">
    <p class="child display">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat enim ducimus accusantium recusandae quidem velit quasi voluptatibus voluptatum dolores voluptate in eos delectus fugit odit est reiciendis at? Impedit cupiditate.</p>
    <p class="child display">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat enim ducimus accusantium recusandae quidem velit quasi voluptatibus voluptatum dolores voluptate in eos delectus fugit odit est reiciendis at? Impedit cupiditate.</p>
</div>

CSS

html {
    font-family: Helvetica, Arial, sans-serif;
}

.parent {
    overflow: hidden; /* Prevent ancestor's collapsing */
    max-width: 50em;
    margin: 0 auto;
    background: lightblue;
}

.child {
    background: tomato;
    margin: 1em;
}

.float {
    float: left;
    clear: left;
}

.display {
    display: inline-block; /* inline-table works too */
}

h2, h3 {
  text-align: center
}