How to have responsive text and divs side by side - html

Question

I'd like to have in a single line text and 3 divs, in the second line another text and three more divs etc.
Currently that's how it looks like
and my code is
svg {
margin-left: 0%;
float: left;
height: 12%;
width: 28%;
}
h2{
left: 2%;
font-size: 2em;
padding-top: 180px;
top: -40px;
}
I cannot use class names because each div has a different one, that gets dynamically, and there are more than thirty divs. That's why I'm trying to fix it by using the h2 and div as elements.
I managed with this code
div {
margin-left: 10px;
float: right;
bottom: 1852px;
position: relative;
height: 12%;
width: 28%;
}
h2{
left: 2%;
position: relative;
font-size: 2em;
padding-top: 180px;
top: -40px;
}
to achieve what I'm trying
but it is different in different screens. Sometimes display 4 divs and other times 2 divs. I tried position: fixed but couldn't make it. I'm not familiar with css and I'm really struggling on this.

Answer 1

Create divs with percentage.
Or you can use calc() for calculate margins for box.
.box-container {
border: 1px solid #500;
}
.box {
display: inline-block;
width: 20%;
}
.box-text {
display: inline-block;
padding: 10px;
box-sizing: border-box;
width: 40%;
}
.content {
box-sizing: border-box;
border: 1px solid red;
}
.inner {
margin: 10px;
padding: 10px;
background-color: #CCC;
}
Other solution is create another div inside div box and add margins.

Answer 2

Use display:table, display:table-row and display:table-cell combination as follows and keep elements perfectly in place.
html, body {
height: 100%; /* just in case you want it to span whole height */
margin: 0; /* otherwise dont use this */
padding: 0;
}
div.table {
display: table;
width: 100%;
height: 100%; /* just in case you want it to span whole height */
/* otherwise use a custom height */
}
div.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
padding: 10px; /* creating gaps */
vertical-align: middle; /* aligning to middle */
}
div.table-cell {
width:25%; /* width of the content parent */
}
div.content {
background-color: grey;
height: 100%;
}
<div class="table">
<div class="table-row">
<h2 class="table-cell">text 1</h2>
<div class="table-cell"><div class="content"></div></div>
<div class="table-cell"><div class="content"></div></div>
<div class="table-cell"><div class="content"></div></div>
</div>
<div class="table-row">
<h2 class="table-cell">text 2</h2>
<div class="table-cell"><div class="content"></div></div>
<div class="table-cell"><div class="content"></div></div>
<div class="table-cell"><div class="content"></div></div>
</div>
<div class="table-row">
<h2 class="table-cell">text 3</h2>
<div class="table-cell"><div class="content"></div></div>
<div class="table-cell"><div class="content"></div></div>
<div class="table-cell"><div class="content"></div></div>
</div>
</div>