title: how to wrap div elements boxes with responsive
body: <p>How to wrap div boxes into main div along with images with responsive.?
  Am trying to achieve below layout.
  <a href="https://i.stack.imgur.com/KRXUS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KRXUS.png" alt="layout"></a></p>
  
  <p>When i use <code>float:left</code> the boxes are aligned perfect where as without it if i use display inline block the boxes are not aligned as shown below.</p>
  
  <p><a href="https://jsfiddle.net/kkmail/c4cujv8s/" rel="nofollow noreferrer">My jfiddle</a></p>
  
  <p><a href="https://i.stack.imgur.com/8WZii.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8WZii.png" alt="Boxes should be wrapped"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mywrapper {
       margin: 0 auto;
       min-width: 320px;
       max-width: 905px;
       background: yellow;
       
   }
   
  .firstblock {
    margin-top: 60px;
       margin-bottom: 60px;     
       background: red;
       //background: #2b2b2b;
       padding:30px;
       width:auto;
    height:auto;
       
   }
  
  
   
  .mainimage{
   width: 190px;
   height: 125px;
   margin-left:2%;
   float:left; 
   padding-right:30px;
  }
  
  .smallbox{
   float: left;
      width: 190px;
      height: 110px;
      background-color: green;
      margin-right:10px;
      
  }
  
  .secondblock {
       margin-bottom: 30px;
       height: 215px;
       background: aqua;
       padding:30px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="mywrapper" id="myid"&gt;
      Hello
   &lt;div class="firstblock"&gt;
   &lt;div &gt;
     &lt;img class="mainimage" src="mainimg.JPG" border="0" /&gt;
    &lt;/div&gt;
    &lt;div&gt;   
     &lt;h2 class="title"&gt;&lt;span&gt;MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT&lt;/span&gt;&lt;/h2&gt;  
     &lt;div class="smallbox"&gt;&lt;img class="pcspecimg" src="box1.JPG" alt="box1.JPG" border="0" /&gt;&lt;span&gt;box1&lt;/span&gt;&lt;div&gt;MY TEXT&lt;/div&gt;&lt;/div&gt;
     &lt;div class="smallbox"&gt;&lt;img class="pcspecimg" src="box2.JPG" alt="box2.JPG" border="0" /&gt;&lt;span&gt;box2&lt;/span&gt;&lt;div&gt;MY TEXT MY TEXT&lt;/div&gt;&lt;/div&gt;
     &lt;div class="smallbox"&gt;&lt;img class="pcspecimg" src="box3.JPG" alt="box3.JPG" border="0" /&gt;&lt;span&gt;box3&lt;/span&gt;&lt;div&gt;MY TEXT MY TEXT&lt;/div&gt;&lt;/div&gt;
       
    &lt;/div&gt;
   &lt;/div&gt;
   
   
   &lt;div class="secondblock"&gt;
   secondblock
   &lt;/div&gt; 
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>