how to wrap div elements boxes with responsive - html

Question

How to wrap div boxes into main div along with images with responsive.?
Am trying to achieve below layout.
When i use float:left the boxes are aligned perfect where as without it if i use display inline block the boxes are not aligned as shown below.
My jfiddle
.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;
}
<div class="mywrapper" id="myid">
Hello
<div class="firstblock">
<div >
<img class="mainimage" src="mainimg.JPG" border="0" />
</div>
<div>
<h2 class="title"><span>MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT</span></h2>
<div class="smallbox"><img class="pcspecimg" src="box1.JPG" alt="box1.JPG" border="0" /><span>box1</span><div>MY TEXT</div></div>
<div class="smallbox"><img class="pcspecimg" src="box2.JPG" alt="box2.JPG" border="0" /><span>box2</span><div>MY TEXT MY TEXT</div></div>
<div class="smallbox"><img class="pcspecimg" src="box3.JPG" alt="box3.JPG" border="0" /><span>box3</span><div>MY TEXT MY TEXT</div></div>
</div>
</div>
<div class="secondblock">
secondblock
</div>
</div>

Answer 1

I think you would like this
.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;
}
.left-div{
float:left;
width: 27%;
height: 125px;
margin-right:2%;
border: 1px solid;
}
.right-div{
float:right;
width:70%;
}
h2{
margin-top:0;
}
.clear{
clear:both;
}
img{
height:auto;
width:auto;
max-width:100%;
max-height:100%;
}
.pcspecimg {
border: 1px solid #fff;
float: left;
height: 40px;
margin-right: 3%;
width: 27%;
}
.small-wrap {
margin-bottom: 5px;
}
.smallbox {
background-color: green;
float: left;
height: 110px;
margin-right: 1.5%;
width: 32.3%;
padding:5px;
box-sizing: border-box;
}
.smallbox:last-child{
margin-right:0;
}
.secondblock {
margin-bottom: 30px;
height: 215px;
background: aqua;
padding:30px;
}
<div class="mywrapper" id="myid">
Hello
<div class="firstblock">
<div class="left-div">
<img class="mainimage" src="mainimg.JPG" border="0" />
</div>
<div class="right-div">
<h2 class="title">
<span>MY TEXT MY TEXT</span>
</h2>
<div class="smallbox">
<div class="small-wrap">
<div class="pcspecimg">
<img src="box1.JPG" alt="box1" border="0" />
</div>
<span>box1</span>
<div class="clear"></div>
</div>
<div>MY TEXT</div>
</div>
<div class="smallbox">
<div class="small-wrap">
<div class="pcspecimg">
<img src="box1.JPG" alt="box1" border="0" />
</div>
<span>box1</span>
<div class="clear"></div>
</div>
<div>MY TEXT</div>
</div>
<div class="smallbox">
<div class="small-wrap">
<div class="pcspecimg">
<img src="box1.JPG" alt="box1" border="0" />
</div>
<span>box1</span>
<div class="clear"></div>
</div>
<div>MY TEXT</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="secondblock">
secondblock
</div>
</div>

Answer 2

.mywrapper {
margin: 0 auto;
min-width: 320px;
max-width: 905px;
background: yellow;
}
.firstblock {
display: flex;
flex-direction: row;
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;
}
<div class="mywrapper" id="myid">
Hello
<div class="firstblock">
<div>
<img class="mainimage" src="mainimg.JPG" border="0" />
</div>
<div>
<h2 class="title"><span>MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT</span></h2>
<div class="smallbox"><img class="pcspecimg" src="box1.JPG" alt="box1.JPG" border="0" /> <span>box1</span><div>MY TEXT</div>
</div>
<div class="smallbox"><img class="pcspecimg" src="box2.JPG" alt="box2.JPG" border="0" /> <span>box2</span><div>MY TEXT MY TEXT</div>
</div>
<div class="smallbox"><img class="pcspecimg" src="box3.JPG" alt="box3.JPG" border="0" /> <span>box3</span><div>MY TEXT MY TEXT</div>
</div>
</div>
</div>
<div class="secondblock">
secondblock
</div>
</div>
Is it you want?
Can You explain detail?