JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="column">
        <div class="row">
            <button class="wide"></button>
        </div>
           <div class="row">
            <button></button><button></button>
        </div>        
    </div>
    <div class="column">
        <div class="row">
            <button class="wide"></button>
        </div>
           <div class="row">
            <button></button>
            <button></button>
        </div>        
    </div>
</div>

CSS

/* reset */
div, button {
    margin: 0;
    padding: 0;
    border: 0;
}

div.container {
    display:block;
    vertical-align:central;
	text-align:center;
    
    background-color: #C1E0FF; /*for testing purpose*/
}

div.container div.column {
    width: 324px;
    margin-right: 50px;
    display:inline-block;   
    
    background-color: #E0FFC1; /*for testing purpose*/
}

div.container div.row {
    margin-bottom: 10px;        
}

div.container div.row:last-child {
    margin-bottom: 0px;        
}

div.container button {
    width: 155px;
    height: 155px;
    margin-right: 10px;
}

div.container button:last-child {
    margin-right: 0px;    
}

div.container button.wide {
    width: 320px;
}