JSFiddle - React, Tailwind, and code Playground

by johntrepreneur

HTML

<div class="parent1">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
</div>
<br/>
<br/>
<div class="parent2">
    <div class="child3">child3</div>
    <div class="child4">child4</div>
</div>

CSS

.parent1 { /*spaces itself from its children*/
    display: inline-block;
    padding: 10px;
    font-size: 0;
    border: 1px solid red;
}
.child1 {
    display: inline-block;
    margin-right: 10px;
    font-size: 12pt;
    border: 1px solid blue;
}
.child2 {
    display: inline-block;
    font-size: 12pt;
    border: 1px solid green;
}
.parent2 { /*has not spacing from its children*/
    display: inline-block;
    font-size: 0;
    border: 1px solid red;
}
.child3 {
    display: inline-block;
    margin: 10px;
    font-size: 12pt;
    border: 1px solid blue;
}
.child4 {
    display: inline-block;
    margin-right: 10px;
    font-size: 12pt;
    border: 1px solid green;
}