Sizing html elements relatively while align properly - html

Question

In this case, there are multiple input fields across multiple rows.
Each field width given as no of characters that field should support
If field width is 10, it should support 10 characters
There is a fixed margin between fields
Ex:
First row have 3 input fields with widths as (10, 10 ,10)
Second row have 4 input fields with widths as (10, 5, 5, 10)
Third row have 2 input fields with widths as (15, 15)
In this case summation of field's widths is 30 in all three rows
So left and right ends of row's should be in a same vertical line
How to calculate field's widths?
Is that possible to keep alignment between rows?
Thanks

Answer 1

You can do it quite easily with CSS grid. Your html may change, but the solution lay on grid.
div {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(6, 5fr);
grid-template-rows: repeat(3, 1fr);
}
section:nth-child(1),
section:nth-child(2),
section:nth-child(3),
section:nth-child(4),
section:nth-child(7) {
grid-column: span 2;
border: 3px solid orange;
}
section:nth-child(8),
section:nth-child(9) {
grid-column: span 3;
border: 3px solid red;
}
<div>
<section>10</section>
<section>10</section>
<section>10</section>
<section>10</section>
<section>5</section>
<section>5</section>
<section>10</section>
<section>15</section>
<section>15</section>
</div>

Answer 2

You could use flex grow, for example like this:
<div class="flexContainer">
<div class="flexItem10">…</div>
<div class="flexItem5>…</div>
<div class="flexItem5>…</div>
<div class="flexItem10">…</div>
.flexContainer {
display: flex;
gap: 20px;
}
.flexItem5 {
flex-grow: 5;
}
.flexItem10 {
flex-grow: 10;
}