I'm struggling to incorporate this design into my webpage; I can't seem to get the right div's height to match the left div as depicted in the second image. Can someone offer some assistance?
Additionally, when viewed on mobile, the squares are being displayed one per line, but I need them to display two per line.
Below is the code:
<div class="container-fluid caffstudio">
<div class="row">
<div class="col-md-6 caffLeft">
<div class="row">
<!-- caff logo -->
<div class="col-md-4">
<div class="cfimgdiv" style="display: inline-block">
<img src="caffeine logomark.svg" class="imgcaff" />
</div>
</div>
<!-- caff text -->
<div class="col-md-8" style="display: inline-block">
<div class="cafftext">Caffine UX Design Studio</div>
<div class="cafftext1">
Lorem ipsum dolor sit amet consectetur. Quisque velit cursus nulla aenean aliquam auctor orci.
</div>
<br />
<a href="#" class="linkcaff mt-10">Visit Website</a>
</div>
<!-- first line of cards -->
<div class="container-fluid">
<div class="img4">
<div class="row">
<div class="col-md-6 col-sm-12 im4div">
<div class="im4" style="display: inline-block">
<img src="experience.svg" />
</div>
<div class="im4txt" style="display: inline-block">
<div>5 yrs</div>
<div>Experience</div>
</div>
</div>
<div class="col-md-6 col-sm-12 im4div">
<div class="im4" style="display: inline-block">
<img src="projects.svg" />
</div>
<div class="im4txt" style="display: inline-block">
<div>25+</div>
<div>Projects completed</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 im4div">
<div class="im4" style="display: inline-block">
<img src="pipeline.svg" />
</div>
<div class="im4txt" style="display: inline-block">
<div>10+</div>
<div>Project in pipeline</div>
</div>
</div>
<div class="col-md-6 col-sm-12 im4div">
<div class="im4" style="display: inline-block">
<img src="screensdelivered.svg" />
</div>
<div class="im4txt" style="display: inline-block">
<div>1597</div>
<div>Screens delivered</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12" style="z-index: 1;">
<div class="multipleRect">
<div class="twoRect">
<div class="greyRect"></div>
<div class="greyRect"></div>
</div>
<div class="twoRect">
<div class="greyRect"></div>
<div class="greyRect"></div>
</div>
<div class="twoRect">
<div class="greyRect"></div>
<div class="greyRect"></div>
</div>
</div>
</div>
</div>
</div>CSS
.caffstudio{
margin: 0 auto;
background-color: #211E1E;
position: relative;
padding-left: 30px;
overflow: hidden;
}
.greyRect{
width: 200px;
height: 200px;
background: #D9D9D9;
border-radius: 18.6457px;
display: inline-block;
margin: 5px;
}
.multipleRect{
transform: rotate(12deg);
max-height: 80%;
}My current output: [1]: https://i.sstatic.net/6hUSm.png
Expected output: [2]: https://i.sstatic.net/HN793.png