JSFiddle - React, Tailwind, and code Playground

HTML

<section id="row1">
  <div class="container">
    <div id="table">
      <div class="tableRow">
          
        <!-- Cell 1 -->
        <div class="tableCell">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac facilisis ante. Aenean et augue feugiat, gravida ligula quis, pharetra quam. Integer nec sodales erat. Mauris fringilla eleifend condimentum. Cras eleifend sodales nisi in tempor.</p>
        </div>
          
        <!-- Cell 2 -->
        <div class="tableCell">
            <div id="box"></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="row2">
  <div class="container">
    <div id="table">
      <div class="tableRow">
          
        <!-- Cell 1 -->
        <div class="tableCell">
            <div id="box"></div>
        </div>
          
        <!-- Cell 2 -->
        <div class="tableCell">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac facilisis ante. Aenean et augue feugiat, gravida ligula quis, pharetra quam. Integer nec sodales erat. Mauris fringilla eleifend condimentum. Cras eleifend sodales nisi in tempor.</p>
        </div>
      </div>
    </div>
  </div>
</section>

CSS

#row1{
    background:#FFF;
}

#row2{
    background:#F0F0F0;
}

.container {
  margin: 0 auto;
  max-width: 55rem;
  width: 90%;
  padding:20px 0px;
}

#table {
  display: table;
  border-spacing: 10px 0px;
  margin: 0 auto;
}

.tableRow {
  display: table-row;
}

.tableCell {
  display: table-cell;
  width:50%;
  height: auto;
  vertical-align: middle;
}

#box{
    background:#FF0;
    width:150px;
    height:150px;
    margin:0 auto;
}

@media only screen and (max-width : 640px) {

  .tableCell {
    display: block;
    width: auto;
    height: auto;
    vertical-align: middle;
    text-align: center;
  }

  .tableCell:first-child{
    margin-bottom: 30px;
  }

  .tableCell img{
    margin-bottom: 0px;
    max-width: 250px;
  }

}