JSFiddle - React, Tailwind, and code Playground

by Hashem Qolami

HTML

<section id="row1">
  <div class="container">
         
        <!-- Cell 1 -->
        <div class="col">
            <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><!--  There should NOT be any white-
                    space between these two inline-block
                    columns in order to remove
                    the gap.

         --><div class="col">
            <div id="box"></div>
        </div>
      </div>
</section>

<section id="row2">
    
    <div class="container">
        
        <div class="col push-right">
            <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><!--  There should NOT be any white-
                    space between these two inline-block
                    columns in order to remove
                    the gap.

         --><div class="col push-left">
            <div id="box"></div>
        </div>
    </div>
    
</section>

CSS

* {
    padding: 0;
    margin: 0;
}

#row2{
    background:#F0F0F0;
}

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

.col {
    width: 50%;

    display: inline-block;
    padding: 0 10px;
    vertical-align: middle;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.col.push-right {
    margin-left: 50%;
}

.col.push-left {
    margin-left: -100%;
}

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

@media only screen and (max-width : 640px) {
    
    .col {
        display: block;
        width: auto;
        height: auto;
        text-align: center;
        
        padding: 10px;
    }
    
    .col.push-right,
    .col.push-left {
        margin-left: auto;
    }
    
    .tableCell:first-child{
        margin-bottom: 30px;
    }
    
    .tableCell img{
        margin-bottom: 0px;
        max-width: 250px;
    }
    
}