JSFiddle - React, Tailwind, and code Playground

by SO_AMK

HTML

<div id="top-container" class="container">
<section>
    <div class="box"></div>
</section>

<section>
    <div class="box"></div>
</section>

</div>
<div id="bottom-container" class="container">

<section>
    <div class="box"></div>
</section>

<section>
    <h1>Heading</h1>
    <div class="box"></div>
</section>
    
</div>

CSS

.clear { clear: both; }

section {
    float: left;
    margin: 5px;
}

.container:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

.box {
    width: 200px;
    height: 200px;
    background: #CECECE;
}

h1 {
    color: #CCC;
    margin: 0;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 25px;
    padding: 0;
}

JavaScript

$("section").each(function() {
    if ($(this).children("h1").length > 0) {
        $(this).prev().css("margin-top", ($(this).children("h1").height() + 5));
        // +5 for the margin on sections
    }
});