JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-content">
        <h2 class="title-two" id="portfolio">PORTFOLIO</h2>
      <div class="column-left left">
         <img src="images/picture1.png" class="first">
         <h2>Title</h2>
         <p>Text field</p>
      </div>
      <div class="column-left right">
         <img src="images/picture2.png" class="first">
         <h2>Title</h2>
         <p>Text field</p>
      </div>
      <div class="column-right left">
         <img src="images/picture3.png" class="first">
         <h2>Title</h2>
         <p>Text field</p>
      </div>
      <div class="column-left right">
         <img src="images/picture4.png" class="first">
         <h2>Title</h2>
         <p>Text field</p>
      </div>
</div>

CSS

@media  (min-width: 768px) {
   .left {
    display: block;
    float:left;
    width: 47%;
    padding-left: 2%;
    margin-left: 2%;
 }

 .right {
    display: block;
    float:right;
    width:  47%;
    padding-right: 2%;
    margin-right: 2%;
 }
}
}