JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="offers clear">
        <li>
            <div class="item">
            
            </div>
            <div class="item">
            
            </div>
        </li>

        <li class="extend">
            <div class="item-extend">
               
            </div>
        </li>

        <li>
            <div class="item">
             
            </div>
            <div class="item">

            </div>
        </li>

        <li class="extend">
            <div class="item-extend">
               
            </div>
        </li>

        <li>
            <div class="item">
             
            </div>
            <div class="item">
             
            </div>
        </li>
    </ul>

CSS

*{
  box-sizing: border-box;
  outline: 0 none !important;
  margin: 0;
  padding: 0;
}

ul.offers {
  width:100%;
  border: solid 2px black;
  list-style-type: none;
}


li {
  width: 20%;
  float: left;
  border: solid 1px blue;
}




ul.offers .item {
  border: solid 1px red;
  height: 100px;
  min-width: 100px;
}

ul.offers .item-extend {
  border: solid 1px red;
  height: 200px;
}