JSFiddle - React, Tailwind, and code Playground

HTML

<h2>My problem code</h2>

<div class="big">1</div>
<div class="big">2</div>
<div class="big">3</div>
<div class="big">4</div>
<div class="small">5</div>
<div class="small">6</div>
<div class="small">7</div>

<h2>How it should look</h2>

<div class="big">1</div>
<div class="small">5</div>
<div class="big">2</div>
<div class="small">6</div>
<div class="big">3</div>
<div class="small">7</div>
<div class="big">4</div>

<h2>I cannot do this</h2>

<div class="big">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div class="small">
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

CSS

div {
    display: inline-block;
    border: 1px solid #000;
    margin: 2px;
}

div div {
    display: block;
}

.big {
    width: 55%;
    float: left;
}

.small {
    width: 40%;
}