JSFiddle - React, Tailwind, and code Playground

HTML

<div  class="sad se"> 
   <div class="sad ne">  1  </div>
   <div class="sad be">  2  </div>
   <div class="sad ve">  3  </div>
</div>

CSS

.sad:not(.se) {
  
  border: 2px solid #333;
  //width: 50px;
  height: 50px;
  //margin: 10px;
  padding: 10px;

}

.se {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 160px;
}