Jquery: add row with set number of columns and set width

Question

This will probably sound trivial to you but still..

User inputs a name and two numbers, all stored in variables. This is repeated multiple times.

I want to display that data in a 19 columns row, of which 11 columns are size 1, and the other one is size 8 and begins from the first inserted number (and of course ends on the second one. Better explained in this screenshot:

Most the libraries are "limited" by the standard 12-columns-per-row (I usually work with Bootstrap), which I cannot use because the data actually makes sense only when on the same row. There is no need to worry about extra-small screens, since this will be used only on computers.

Maybe flexbox?

Open to suggestions, of course :)

Thanks in advance!

Answer 1

Simply create two classes; one that is 1/19th of the width of the page, and one that is 9/19ths the width of the page. Then float both elements to the left:

.one {
  float: left;
  width: calc(100% / 19);
}

.eight{
  float: left;
  width: calc((100% / 19) * 8);
}

<div class="one">1</div>
<div class="one">1</div>
<div class="eight">8</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>

Then in jQuery, if you want to add a new row, just make sure to give it the new class:

$("body").append("<div class='eight'>New Data</div>");

Keep in mind that if you want to append data with an offset, you'll need to add empty <div> elements that have the one class.

Hope this helps! :)