JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="widget1">1</div>
    <div id="widget2">2 - ldfj sdjflkdsjfl ksjdl khdskdfsjhfkjsdh fkjhf kjsdhf kjsdhf ksdhfk
        jsdhfjk sdfkjdsh cj dkjhdkjh skdjh dksjdsjhfjksd hfjkhkfjsdlfjsdlkfj</div>
    <div
    id="widget3">3</div>
<div id="widget4">4</div>
<div id="widget5">5</div>
<div id="widget6">6</div>
<div id="widget7">7</div>
<div id="widget7">8</div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
}
#container {
    overflow: hidden;
    width: 440px;
}
#container div {
    background-color: gray;
    width: 110px;
    margin: 5px;
    float: left;
}
#container div:nth-child(4) {
    clear: both;
}