JSFiddle - React, Tailwind, and code Playground

by Andres Abadia

HTML

<div class="row">
  <div class="column">
    <div class="huge">1</div>
    <div>1</div>
    <div>1</div>
  </div>
  <div class="column">
    <div>2</div>
    <div>2</div>
    <div>2</div>
  </div>
</div>

CSS

.row {
    padding-top: 120px;
    padding-left: 25px;
    padding-right: 25px;
    flex-flow: row wrap;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  
}

.column {
    flex-direction: column;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 50%;
    flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 50%;
    max-width: 50%;
  
}
.column>div{
  border:1px solid grey;
}
.huge{height: 150px;}
.mat-expansion-panel {
    background: rgba(0, 0, 0, 0.7);
    width: px;
    margin-bottom: 1.5rem;
}

.mat-expansion-panel-header {
    height: 150px;
    font-family: Gotham HTF;
    font-size: 26px;
    justify-content: space-between;
    text-align: center;
}