JSFiddle - React, Tailwind, and code Playground

by scrimothy

HTML

<h2>Parent: nowrap / Children: floating blocks</h2>
<div class="wrapper nowrap">
    <div class="floating"></div>
    <div class="floating"></div>
    <div class="floating"></div>
    <div class="floating"></div>
</div>
<div class="clearfix"></div>
<h2>Parent: normal / Children: floating blocks</h2>
<div class="wrapper normal">
    <div class="floating"></div>
    <div class="floating"></div>
    <div class="floating"></div>
    <div class="floating"></div>
</div>

<div class="clearfix"></div>

<h2>Parent: nowrap / Children: inline-block</h2>
<div class="wrapper nowrap">
    <div class="inlineBlock"></div>
    <div class="inlineBlock"></div>
    <div class="inlineBlock"></div>
    <div class="inlineBlock"></div>
</div>
<div class="clearfix"></div>
<h2>Parent: normal / Children: inline-block</h2>
<div class="wrapper normal">
    <div class="inlineBlock"></div>
    <div class="inlineBlock"></div>
    <div class="inlineBlock"></div>
    <div class="inlineBlock"></div>
</div>

CSS

.wrapper {
    border: 1px dashed #333;
    float: left;
    margin-bottom: 10px;
    width: 120px;
}

.nowrap {
    white-space: nowrap;
}
.clearfix {
    clear: both;
}

.floating {
    background: lightblue;
    border: 1px solid blue;
    float: left;
    width: 48px;
    height: 48px;
}

.inlineBlock {
    background: lightblue;
    border: 1px solid blue;
    display: inline-block;
    width: 48px;
    height: 48px;
}